title: Can't keep last item in navbar from dropping to next line when window resized?
body: <p>Trying to have a horizontal navigation bar that has equally spaced links spanning across the entire page. I have 6 links, so I figured that each one would have a 16.67% width approximately, but that doesnt work. </p>
  
  <p>16.5% works, until you resize the page, at which point the last item in the nav bar drops down to the next line. Is there a way that I can prevent this so that they are centered at all times and in all window sizes? </p>
  
  <p>And is there a way that I can prevent the user from resizing the window to a size that would cause the links to either overlap or not be fully displayed? </p>
  
  <p>Here's my code so far:</p>
  
  <pre><code>#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
  li      {width:100%}
  li a    {padding: 6px 3px; float:left; width:16.5%; text-align:center;}
  
  &lt;ul id='navbar'&gt;
  &lt;li&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&gt;&lt;a href='#'&gt; 5 &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href='#'&gt; 6 &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>