Bootstrap Nav logo issue

Question

Это должно быть просто, но я чего-то не хватает.

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

http://codepen.io/davidcochran/pen/Dihnl

Однако, когда я на самом деле осуществить это в мой начальной загрузке сайта он отказывается от центра.

<header role="banner" id="logo-main1"><div id="everything"> 
    <img id="logo-main1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"> 
    <nav id="navbar-primary" class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="navbar-primary-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
</header><!-- header role="banner" --></div> 

CSS

.header[role="banner"] { 
    #logo-main { 
    display: block; 
    margin: 20px auto; 
    } 
} 

#navbar-primary.navbar-default { 
    background: transparent; 
    border: none; 
    .navbar-nav { 
    width: 100%; 
    text-align: center; 
    > li { 
     display: inline-block; 
     float: none; 
     > a { 
     padding-left: 30px; 
     padding-right: 30px; 
     } 
    } 
    } 
} 
.logo-main1 { 
    text-align: center 
} 

это выглядит следующим образом:

!!! Ссылка удалена до дальнейшего осмотра !!!

Answer 1

Еще одно css-замедление, вероятно, отменяет селектор и торможение (ниже), которое центрирует ваш навигатор.

#navbar-primary.navbar-default .navbar-nav { 
width: 100%; 
text-align: center;