How To Fill Entire Div With Background Color

I'm trying to get a background color to fill the entire div in a child div in bootstrap, but I'm completely stuck. I want the right section to be yellow, but it's only highlighting

Solution 1:

This is happening because you are using .col-lg-* with .container which only has width:1170px

So change .container to .container-fluid

See more info about containers in bootstrap docs

.new-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
}
.yellow {
  background-color: yellow;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  /><!-- New Exhibit Section --><sectionid="new"class="new-section"><divclass="container-fluid"><divclass="row"><divclass="col-xs-6 col-lg-6"><h1>Section left</h1></div><divclass="col-xs-6 col-lg-6 yellow"><h1>Section right</h1></div></div></div></section>

Solution 2:

or just:

.yellow {
    background-color: yellow;
    padding: 00;
}

Solution 3:

Keep in mind that h1 has top and bottom margins that will be taken over by its wrapper and will not be affected by background-color since they are outside of the block element. You could remove the h1 tag and style the parent container in a similar way (but using padding instead of margins):

https://jsfiddle.net/j33wz2o6/1/