Can't center buttons in navbar

Question

I'm trying to center these 3 buttons on my navbar and I have tried searching around and can't find anything that works.

HTML:

 <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
   <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li>
        <button class="btn btn-primary" type="button" ID="btn-pg" data-toggle="collapse" data-target="#pictures" aria-expanded="false" aria-controls="pictures">Photo Gallery</button>
      </li>
      <li>
        <button class="btn btn-danger" type="button" ID="btn-sl" data-toggle="collapse" data-target="#staff" aria-expanded="false" aria-controls="staff">Staff List</button>
      </li>
      <li>
        <button class="btn btn-danger" type="button" ID="btn-bm" data-toggle="collapse" data-target="#banmanager" aria-expanded="false" aria-controls="banmanager">Ban Manager</button>
      </li>
    </ul>
  </nav>
</header>

CSS:

  .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;
  }

Answer 1

Add this CSS:

.navbar-nav {
  float: none;
  text-align: center;
}

.navbar-nav li {
  float: none;
  display: inline-block;
}

Working fiddle