title: Menu bar breaks to the next line / fluctuates in size depending on zoom level
body: <p>This is my menu bar at 100% on my browser:
  <img src="https://i.imgur.com/KdGWB2Q.png"></p>
  
  <p>And this is what happens at certain zoom levels and some other browsers:
  <img src="https://i.imgur.com/tqgPM57.png"></p>
  
  <p>Here's a simplified version on fiddle: <a href="http://jsfiddle.net/heetertc/ARGm8/6/" rel="nofollow noreferrer">http://jsfiddle.net/heetertc/ARGm8/6/</a></p>
  
  <pre><code>&lt;div id="bar"&gt;
      &lt;div id="center-menu"&gt;
          &lt;ul id="nav"&gt;
              &lt;li&gt;&lt;a href="/about/"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/bacharach-institute/"&gt;THE INSTITUTE&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/renaissance-pavilion/"&gt;RENAISSANCE PAVILION&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/day-rehab/"&gt;DAY REHAB&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/outpatient-services/"&gt;OUTPATIENT SERVICES&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/therapy-centers/"&gt;THERAPY CENTERS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/blog/"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/contact/"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;style type="text/css"&gt;
  
  ol, ul {
      list-style: none outside none;
  }
  #bar {
      height: 50px;
      left: 0;
      margin-top: 8px;
      position: absolute;
      width: 100%;
  }
  #bar ul {
      text-align: center;
  }
  #center-menu{
      height: 50px;
      margin: 0 auto;
      width: 954px;
  }
  #nav {
      list-style: none outside none;
      margin-bottom: 0;
      margin-top: 0;
      padding-top: 0;
      width: 100%;
  }
  #nav li {
      border-left: 1px solid #0c4b89;
      display:block; 
      float:left; 
      height: 50px;
      line-height: 50px;
      padding-top: 0;
      position:relative;  
      z-index:500;
  }
  #nav li a {
      color: #FFFFFF;
      display: block;
      font-size: 12px;
      font-weight: bold;
      height: 50px;
      padding-left: 18px;
      padding-right: 18px;
      text-align: left;
      text-decoration: none;
      text-shadow: 0 1px 1px #000000;
  }
  #nav &gt; li:last-child {
      border-right: 1px solid #0C4B89;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>I'm sure this is something really easy, but I've been at it for a few days and tried many different things, including many attempts of resizing.</p>
  
  <p>So why does the last element skip down to the next level, but only at different zooms? When I resize it to fit one zoom level, it looks completely different in another. Is there a way to get this to always fill the 954px #bar element no matter the zoom?</p>