title: Nav width not changing with content
body: <p>I have a nav bar that displays fine when I have 5 navigation objects in it but when I add 3 more it drops below the main header why?</p>
  
  <p><strong>5 Objects:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/jd72R.png" alt="enter image description here"></p>
  
  <p><strong>7 Objects:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/FSsH3.png" alt="enter image description here"></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div class="w960"&gt;
          &lt;div id="logo"&gt;
              &lt;h2&gt;Text&lt;/h2&gt;
              &lt;p&gt;Text&lt;/p&gt;
          &lt;/div&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li class="first active"&gt;
                      &lt;a href="#"&gt;1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;2&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;3&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;4 &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="last"&gt;
                      &lt;a href="#"&gt;5&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- end of header --&gt;
  </code></pre>
  
  <p>​</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#header{background:#2d2d2f;width:100%; height:120px;clear:both;font-family:Signika,Arial,sans-serif;}
  
  .w960 { width:960px; margin:auto; }
  
  nav{width:auto; float:right;line-height: 50px;}
  nav ul li{font-size:14px; float:left;display: inline-block;padding: 0px 11px;text-transform:uppercase;}
  nav ul li a{padding: 0px 10px; color:#ffb400; text-decoration:none;}
  nav ul li a:hover, .active a{color:#fff}
  
  #logo{width: 40%;float: left;height: 90px;}
  #logo h2{line-height: 41px;color:#FFB400;font-size:28px;}
  #logo h2 span{color:#FFB400;}
  #logo p {margin-top: -25px;color:#b8bbbc;}
  </code></pre>