Bootstrap旋轉木馬標題上升

所有外觀都很好，直到我更改瀏覽器窗口大小：旋轉木馬標題上升並被右側控件覆蓋。我希望標題留在原地，只是改變文字大小。Bootstrap旋轉木馬標題上升

還有一個問題：在更改瀏覽器窗口大小時，輪播控件變得更大。

.carousel-caption{ 
 
     position: absolute; 
 
     left: 200px; 
 
     width: 500px; 
 
     margin-left: 30%; 
 
     margin-bottom: 8%; 
 
     padding-right: 40px; 
 
     max-height: 100%; 
 

 

 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    } 
 

 
    .p1 { 
 
    margin: auto; 
 
     font-size: 22px; 
 
     font-family: ClearSans-Light; 
 
     color: white; 
 
     text-align: left; 
 
     text-shadow: 1px 1px 2px black, 0 0 1em transparent; 
 
    } 
 

 
     .p2 { 
 
     font-size: 22px; 
 
     color: white; 
 
     text-align: right; 
 
     } 
 

 
     .position { 
 
     font-family: ClearSans-Bold; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header id="myCarousel" class="carousel slide"> 
 
     <div class="carousel-inner"> 
 
      <div class="item active"> 
 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> 
 
       <div class="carousel-caption my-carousel-caption"> 
 
        <p class="p1"> 
 
         Snail is a common name that is applied most often to land snails, terrestrial pulmonate gastropod molluscs. However, the common name "snail" is also applied to .. 
 
        </p> 
 
       </div> 
 
      </div> 
 
    
 

 
     <!-- Controls --> 
 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
      <span class="carousel-arrow glyphicon glyphicon-chevron-left"></span> 
 
     </a> 
 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
      <span class="carousel-arrow glyphicon glyphicon-chevron-right"></span> 
 
     </a> 
 
    </header>