Не могу центрировать кнопки в навигаторе

Question

Я пытаюсь центрировать эти 3 кнопки на моем навигаторе, и я попытался найти вокруг и не могу найти ничего, что сработает.

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

Добавить CSS:

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

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

Работа fiddle