CSS - コンテナがページ全体に広がっています

私は自分のサイトの上部に、ビデオなどを埋め込む機能のために、背景画像とテキストの下に黒い帯が入っているセクションを持っています（詳細は/ showreel参照）。未来。私はちょうどいくつかのスタイリングを変更し、今は黒い帯がページ全体に伸びないでしょう。それは今まで働いていませんし、私はそれを取り戻すことができません。これを引き起こしている可能性のあるものは誰にも見えますか？CSS - コンテナがページ全体に広がっています

body { 
 
\t font-family: "Merriweather Sans", sans-serif !important; 
 
\t font-size: 16px !important; 
 
\t line-height: 1.5 !important; 
 
\t color: #333333; 
 
} 
 

 

 
body { 
 
    
 
    margin: 0 auto 0 auto; 
 
    
 
} 
 

 
.container { 
 
    margin: auto; 
 
    max-width: 100%; 
 
    padding-left: 10px !important; 
 
    padding-right: 10px !important; 
 
} 
 

 
section#topimageagency { 
 

 
    height: 400px; 
 
    
 
    background: url('http://localhost:8888/wp-content/uploads/2017/07/VIDEO.jpg') center center no-repeat; 
 
    background-size: 100%; 
 
    background-position: center; 
 
    overflow: hidden; 
 

 
    position: relative; 
 
} 
 

 

 
section#topimageagency .showreel { 
 
    height: 50px; 
 
    max-width: 100% !important; 
 
    position: absolute; 
 
    background-color: black; 
 
    bottom: 0; 
 
    padding: 0 30px; 
 
    justify-content: space-between !important; 
 
} 
 

 
section#topimageagency .showreel, .showreel > div.seemore { 
 
    display: flex; 
 
    align-items: center !important; 
 
    justify-content: flex-start !important; 
 
    flex:1; 
 
} 
 
section#topimageagency .showreel, .showreel > div.seeour { 
 
    justify-content: flex-end; 
 
    flex:1; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
section#topimageagency .showreel p { 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
    margin: 0; 
 
    padding-left: 10px; 
 
    color: #ffffff; 
 
} 
 

 
.showreel i { 
 
    color: #ffffff; 
 
} 
 

 
.seemore { 
 
    margin-left: 30px !important; 
 
} 
 

 

 
.seeour i { 
 
    margin-right: 30px !important; 
 
} 
 

 
#topimageagency a { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
/* position: static; */ 
 
    float: right; 
 
    background-color: #000000; 
 
    padding:5px; 
 
    padding-left:10px; 
 
    padding-right: 10px; 
 
    width:auto; 
 
    white-space: nowrap; 
 
} 
 

 

 

 

 
section#agency .text { 
 
    float: left !important; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    left: 100px; 
 
} 
 

 
.text p { 
 
    font-size: 10px; 
 
    color: #FFFFFF; 
 
} 
 

 
.text h1, h2 { 
 
    color: #FFFFFF; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
.text h2 { 
 
    line-height: 5px; 
 
    font-size: 25px; 
 
    font-weight: 200; 
 
} 
 

 
.text h1 { 
 
    font-size: 50px; 
 
    margin-bottom: 40px; 
 
}

<section id="topimageagency"> 
 
     <div class="container"> 
 
      <a href="http://localhost:8888/products/"> 
 
       I'm a business 
 
      </a> 
 
      <div class="text"> 
 
       <h2>VIDEO & ANIMATION</h2> 
 
       <h1>FOR AGENCY</h1> 
 
       <p><?php the_field('agency_img_paragraph'); ?></p> 
 
      </div> 
 

 
     </div> 
 
     <div class="container showreel"> 
 
      <div class="seemore"> 
 
       <span class="fa-stack fa-lg"> 
 
        <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i> 
 
        <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i> 
 
        </span> 
 
       <p>SEE MORE</p> 
 
      </div> 
 
      <div class="seeour"> 
 
       <p>SEE OUR SHOWREEL</p> 
 
       <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

出典

2017-07-25 Mike.Whitehead