title: Bootstrap Navbar misaligned when scaling back up
body: <p>I have a simple Bootstrap navbar. Everything works fine in Chrome, but in Safari (Version 9.0.3 ) the bar can be scaled down responsively but not scaled back up. When it scales back up it stays 'stuck' vertically.</p>
  
  <p><a href="http://i.stack.imgur.com/PwRQz.png" rel="nofollow">At full-size browser</a></p>
  
  <p><a href="http://i.stack.imgur.com/LZqWk.png" rel="nofollow">When I scale back up to full-size browser after scaling down (which does work)</a></p>
  
  <p>This only occurs in Safari as far as I can tell.</p>
  
  <p>Here is the code for the nav.</p>
  
  <pre><code>      &lt;header&gt;
      &lt;!--Begin Nav. Nav stays inside header for margins--&gt;
              &lt;nav&gt;
                &lt;ul class="nav nav-pills nav-justified"&gt;
                  &lt;li&gt;&lt;a href="#bio-portrait"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#books"&gt;Books&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#publications"&gt;Publications&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#courses"&gt;Courses&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#reviews"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#speaking-other"&gt;Speaking&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;/nav&gt;
      &lt;!--End Nav--&gt;
  </code></pre>
  
  <p>
          </p>
  
  <p>Nav has no CSS properties apart from Bootstrap other than borders on top and bottom. Here's relevant lines:</p>
  
  <pre><code>header, body {
    margin: 5% 5% 5% 5%;
    line-height: 1.5;
    font-size: 100%;
  }
  
  nav {
    border-top: 1px solid;
    border-bottom: 1px solid;
  }
  </code></pre>
  
  <p>I have tried nesting the nav in a .container-fluid but that also didn't help.</p>