title: Center my navbar
body: <p>So what I'm trying to do is have my navbar automatically center to anything that's in it.</p>
  
  <p>What I want is:</p>
  
  <ul>
  <li>Logo all the way on the left (pulled left)</li>
  <li>Button all the way on the right (pulled right)</li>
  <li>Search bar directly in the center of the navbar</li>
  </ul>
  
  <p>What I've been having problems with is that the button can have different width (because it's a button where your username is displayed) and this moves the search bar I have making it not centered.</p>
  
  <p>Here's my current code:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;a class="brand" href="#"&gt;&lt;img src="./assets/img/test_logo.png" /&gt;&lt;/a&gt;
          &lt;div class="nav-collapse collapse"&gt;
            &lt;div class="span4 offset1"&gt;
              &lt;form class="navbar-form pull-right"&gt;
                &lt;div class="input-append"&gt;
                  &lt;input class="span4" id="appendedInputButton" type="text" placeholder="Search..."&gt;
                  &lt;button class="btn" type="button"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;ul class="nav pull-right"&gt;
              &lt;a class="button btn-active" href="" style="margin-top:5px" &gt;&lt;span&gt;&lt;i class="icon-user"&gt;&lt;/i&gt; Sign In&lt;/span&gt;&lt;/a&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Note:</strong>
  The width of the navbar should be 883px. The rest of the CSS should be Bootstrap's default.</p>
  
  <p>Please help!</p>