背景色が私にとってうまくいかないのはなぜですか？

Question

私はフリーコードキャンプを通じて、ポートフォリオタイプのページを設定しようとしています。 About meセクションの下に、contentセクションと呼ばれるdivがあります。私が何をしても、背景色を追加することはできません。私はインラインで、IDを追加し、クラスを追加しようとしましたが、変更されません。助言がありますか？

<!--Navbar--> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About Me</a></li> 
       <li><a href="#">Porfolio</a></li> 
       <li><a href="#">Contact Me</a></li> 
      </ul> 
      </div> 
     </div> 
     </nav> 
<!--hero--> 
    <div class="jumbotron" id="hero"> 
    <h1>Personal Portfolio</h1> 
    </div> 
<!--About Me--> 
    <div class="content-section" style="background-color:red;"> 
    <div class="col-md-6"> 
     <h1>Tyler Jensen</h1> 
     <p>I am starting to work on my front end skills.</p> 
    </div> 
    <div class="col-md-6"> 
     <img class= 
"img-thumbnail" src="1969391_10202992168661853_8988955640237620329_n.jpg"> 
    </div> 
    </div> 
<!--Portfolio--> 
    <div class="content-section"> 
    <div class="col-md-3"><img src="/Hausbarn.jpg" width="200px" alt="german hausbarn"></div> 
    <div class="col-md-3"><img src="/CuppUC.jpg" width="200px" height="133px" alt="cupp insurance"></div> 
    <div class="col-md-3"><img src="/BackflowPipe.jpg" width="200px" height="133px" alt="cupp insurance"></div> 
    <div class="col-md-3"><img src="/carrier1.jpg" width="200px" height="133px" alt="cupp insurance"></div> 
    </div> 
<!--Footer--> 
    <footer class="footer"> 
     <div class="content-section"> 
     <div class="col-md-4 text-center"> 
      <ul style="display: inline-block"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About Me</a></li> 
      <li><a href="#">Porfolio</a></li> 
      <li><a href="#">Contact Me</a></li> 
     </div> 
     <div class="col-md-4 text-center">1234 Street<br>Chicago, Il </div> 
     <div class="col-md-4 text-center"><img src="" width="200px"></div> 
     </div> 
    </footer> 
</body> 

Answer 1

背景色を持っているものにclearfixのクラスを追加します。 http://getbootstrap.com/css/#helper-classes-clearfix

それはブロックフォーマット文脈に関係してい

：How does the CSS Block Formatting Context work?

あなたが持っていますその内部の要素が（あなたのケースでは列の）浮動小数点数のコンテナ（<div）の場合、親は0の高さに折りたたまれますそれを見ることはできません）。問題を解決するにはさまざまな方法がありますが、その1つはclearfixソリューションです。私はときどき問題を解決するために親をoverflow:hiddenに設定します。 clearfixの

より：What is a clearfix?