title: Can't center buttons in navbar
body: <p>I'm trying to center these 3 buttons on my navbar and I have tried searching around and can't find anything that works. </p>
  
  <p>HTML: </p>
  
  <pre><code> &lt;header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"&gt;
     &lt;nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li&gt;
          &lt;button class="btn btn-primary" type="button" ID="btn-pg" data-toggle="collapse" data-target="#pictures" aria-expanded="false" aria-controls="pictures"&gt;Photo Gallery&lt;/button&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;button class="btn btn-danger" type="button" ID="btn-sl" data-toggle="collapse" data-target="#staff" aria-expanded="false" aria-controls="staff"&gt;Staff List&lt;/button&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;button class="btn btn-danger" type="button" ID="btn-bm" data-toggle="collapse" data-target="#banmanager" aria-expanded="false" aria-controls="banmanager"&gt;Ban Manager&lt;/button&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  .navbar-inverse { 
      background-color: rgb(26,31,36);
    }
    .navbar-inverse .navbar-nav .btn {
      text-align: center;
      margin: 0 auto;
      font-weight: bold;
      outline: 0 none;
      font-family: "Sans-serif";
      margin-top: -2px;
    }
    #btn-pg {
      margin-right: 4px;
    }
    #btn-sl {
      margin-right: 4px;
    }
  </code></pre>