Why isn't background-color working for me?

Question

I am working through Free Code Camp and trying to setup a portfolio type page. Under the about me section there is a div called content section. No matter what I do I can not add a background color to it. I have tried inline, adding an id, and adding a class but it just wont change. Any suggestions?

  <!--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>

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Add a class of clearfix to the one that has the background color: http://getbootstrap.com/css/#helper-classes-clearfix

It has to do with the Block Formatting Context: How does the CSS Block Formatting Context work?

When you have a container (<div) with elements inside that are floated (in your case, the columns), the parent collapses to 0 height (so the background is there, but can't see it). There are different ways to fix the issue, one of them is the clearfix solution. I sometimes just set the parent to overflow:hidden to fix the issue.

More on clearfix: What is a clearfix?

edited May 23 '17 at 11:59

Community

1
1

answered May 11 '16 at 20:16

coopersita

5,011
3
27
48

I am using Bootstrap and that worked great! Could you explain why it worked though? – Tyler Jensen May 11 '16 at 20:21
If it worked, please mark answer as correct (checkmark) – coopersita May 11 '16 at 20:26
I did. I had to wait a few minutes before I could mark it. – Tyler Jensen May 11 '16 at 20:28

score 0 · Answer 2 · answered Oct 01 '18 at 11:11

I have a solution for you! Below you can just copy paste the code into your project. I advise you to have HTML & CSS file and make edits that way, just doing it from HTML might encounter some problems that you'll get lost in. Best regards,

body {
background-color: blue;
}

.content-section2 {
background-color: red;
}

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
</head>
<body>
  
</body>
</html>
<!--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-section2">
    <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>

Why isn't background-color working for me?

2 Answers2