title: nav-pills stretching full width, does not work using %
body: <p>I am developing a small app and have now to deal with the front end part of it. I am using bootstrap for it. For the navbar part, I am using <code>nav-pills</code> navbar, and I want it stretched to 100%. My navbar code:</p>
  
  <pre><code> &lt;div class="navbar navbar-static-top" &gt;
      &lt;div class="navbar-inner"&gt;
  
              &lt;ul class="nav nav-pills" &gt;
  
  
                      &lt;li &gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Some&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Items&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Here&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;Register&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the css part:</p>
  
  <pre><code>.nav-pills{
      margin-top:20px;
      width:100%;
  
  }
  .nav-pills &gt; li { 
    float: left;
  
  }
  </code></pre>
  
  <p>Now if i change the 100% in nav-pills to say <code>1366px</code>, it works. But when I scale it to 100%, the navbar is not stretched. I tried giving the width of <code>.nav-pills &gt; li</code> to  25%, trying with just 4 tabs. That also gives the perfect result. But since the number of tabs vary from page to page, I don't want to fix the size of the <code>.nav-pills &gt; li</code> class. I want to stretch the navbar to full width. What is that I should do?</p>