My content wrapper has a height set to 100%, but the issue is that the background color doesn't fully extend across all content. Here are some images and my code for reference. Any assistance would be greatly appreciated! You can see the white space after my wrapper in this link: https://i.sstatic.net/fnCkY.jpg
Here's the HTML code (the part that's not working is the div outerColor):
<p id="dimensions"></p>
<div id="windpageTitle">
<div class="headerContent">
<nav>
<ul class="navDown">
<li><a href="../index.html">Home</a></li>
<li><a href="#windSubtitleSavings">Save</a></li>
<li><a href="#windSubtitleLocation">Locations</a></li>
<li><a href="#windSubtitleStart">Activate</a></li>
</ul>
<a href="#" class="subMenuIcon"><p class="menu"></p></a>
</nav>
<h1 class="pageTitleText">Wind.</h1>
<div class="pageNav">
<ul class="navLink">
<li><a href="../index.html">Home</a></li>
<li><a href="#savingsSub">Savings</a></li>
<li><a href="#locationSub">Location</a></li>
<li><a href="#SubtitleStart">Start</a></li>
</ul>
</div>
</div>
</div>
<div id="outerColor">
<div class="innerContent">
<div id="savingsSub">
<p class="graph"><img src="../images/graph.png" width="500px" height="500px" /></p>
<p class="savingsText">Text here</p>
</div>
<div id="locationSub">
<p class="map"><img src="../images/mapWind.png" width="500px" height="257px" /></p>
<p class="locationText">TEXT HERE</p>
</div>
</div>
</div>
And here's the CSS code:
#windpageTitle {
background-color: #fff;
width:100%;
height:170px;
}
#outerColor {
background-color:#666;
width:100%;
height:100%;
}
.innerContent {
position:relative;
width:90%;
margin:auto;
text-align:center;
}
#savingsSub {
position:relative;
display:table;
padding-top:40px;
width:1300px;
float: left;
}
.savingsText {
display: table-cell;
vertical-align: middle;
float:right;
padding-right:30px;
padding-top:125px;
width:700px;
font-family: 'Oxygen', sans-serif;
font-size:18px;
color:#fff;
line-height:25px;
}
#locationSub {
position:relative;
display:table;
padding-top:55px;
width:1600px;
float: right;
}
.locationText {
display: table-cell;
vertical-align: middle;
float:left;
width:700px;
padding-left:350px;
padding-top:55px;
font-family: 'Oxygen', sans-serif;
font-size:18px;
color:#fff;
line-height:25px;
}
.graph {
float:left;
width:500px;
height:500px;
}
.map {
float:right;
}