title: simple nav left and right alignment
body: <p>So I've done this correctly before and found examples that work but I'm really trying to figure out <strong>WHY</strong> this is happening. Basically I want a navbar with a left and a right side, and the way I'm trying now has the right side being pushed down.</p>
  
  <p>Do not hesitate to tell me to do this a completely different way! My main concern at this point is understanding what is happening as well as developing good industry best practices.</p>
  
  <p>Heres my code</p>
  
  <pre><code>&lt;header class="header"&gt;
  &lt;nav class="nav"&gt;
      &lt;div class="nav-left"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Blah&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Blah&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Blah&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="nav-right"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Bloh&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Bloh&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>nav {
      background: green;
  }
  nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  
  nav a {
      display: block;
      width: 60px;
  
  }
  
  .nav-left li {
      float: left;
  }
  
  .nav-right li {
      float: right;
  }
  </code></pre>