If your navigation bar is floated to the left, an issue arises when the secondary class div cannot fit because it defaults to 100% width. To solve this, adjust its width to be 100% - 150px, allowing the secondary class div to occupy that space. Here is an example:
#Wrapper{
...
width:1000px;
...
}
.navItems {
...
width:150px;
...
}
.secondaryClass {
...
width:850px;
...
}
Utilizing
<div id="wrapper">
<div id="Lnav" class="navigation">
<div class="navItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
<div id="section" class="secondaryClass">
<div class="sec1"&g...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="sec2"&g...
<p>Keep in mind margins and padding. Explore box-sizing and <a href="https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block">CSS display: inline vs inline-block</a> for more details.</p>
<p>I apologize for mistakenly naming .navItems as .navigation. It has been corrected now.</p>
</div></answer1>
<exanswer1><div class="answer" i="36048457" l="4.0" c="1458157818" m="1592644375" v="3" a="SmVmZi5DbGFyaw==" ai="3204536" e="Q29tbXVuaXR5" ei="-1">
<p>When your navigation bar floats to the left, the problem occurs where the secondary class div doesn't fit due to defaulting to 100% width. By adjusting it conceptually to 100% - 150px, the secondary class div will fill that spot. For instance:</p>
<pre><code>#Wrapper{
...
width:1000px;
...
}
.navItems {
...
width:150px;
...
}
.secondaryClass {
...
width:850px;
...
}
With
<div id="wrapper">
<div id="Lnav" class="navigation">
<div class="navItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
<div id="section" class="secondaryClass">
<div class="sec1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="sec2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Remember to account for margin or padding. Look into box-sizing and CSS display: inline vs inline-block SO article for more info.
My apologies for the naming error from .navItems to .navigation. The correction has been made.