ブートストラップカルーセル - 次のコンテナが表示されない

Question

コンテナ（私のコードでは 'five-block'）は私のカルーセル（ 'four-block'に位置しています）の後になければなりません。しかし、コンテナはカルーセルの下にあります。ページを再読み込みしたり、カルーセルをスクロールすると目立ちます。ここで

https://jsfiddle.net/l_zemlyanaya/9dxaxusm/4/

が私のHTMLコードです：

<div class="fourth-block"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="images/carousel-alyona.jpg" alt="Chania"> 
      </div> 
      <div class="item"> 
       <img src="images/carousel-lera.jpg"> 
      </div> 
      <div class="item"> 
       <img src="images/carousel-lesya.jpg"> 
      </div> 
     </div> 

     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
      <span class="carousel-arrow glyphicon glyphicon-menu-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
      <span class="carousel-arrow glyphicon glyphicon-menu-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 

<div class="fifth-block container-fluid"> 
    <p class="proof-text">SOME TEXT</p> 
</div> 

そして、ここに私のCSSコードです：

.fourth-block { 
width: 100%; 
height: 300px; 
} 

#myCarousel { 
height: 300px; 
} 

fifth-block { 
background: #F2EADC; 
padding-top: 30px; 
height: 200px; 
background-image: url("../images/pic3.jpg"); 
background-repeat: repeat; 
} 

.proof-text { 
font-family: SummerFontLight; 
font-size: 20px; 
text-align: center; 
} 

Answer 1

カルーセルは、ヘッダーに入れていたはず