title: Align a bootstrap navbar to the right
body: <p>I'm trying to move my navbar to the right, tried both navbar-right, and pull-right, but all I get is something like this -</p>
  
  <p><img src="https://i.stack.imgur.com/ngQiP.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="container" &gt;
  &lt;h1 align="center"&gt;&lt;a href="#"&gt;My Site&lt;/a&gt;&lt;/h1&gt;
  &lt;div class="container" &gt;
  &lt;ul class="nav nav-tabs navbar-right" &gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;tab1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;tab2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;tab3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;tab4&lt;/a&gt;&lt;/li&gt;  
   &lt;/ul&gt;
  &lt;/div&gt;
  &lt;br&gt;
  Hello
  
  &lt;/div&gt;
  </code></pre>
  
  <p>So there are 2 problems here - 
  The grey line underneath the tabs is much shorter, and the tabs themselves aren't aligned properly - I want "tab1" to be the rightmost one, and correspondingly "tab4" the leftmost one.</p>
  
  <p>I get the same results for navbar-right and pull-right. How can this be fixed?</p>
  
  <p>Thanks!</p>