當點擊導航鏈接時，中心品牌略有移動

我正在使用Bootstrap免費爲某人建立網站。我在代碼上有點業餘愛好者，並且愚蠢地決定在我的頭文件導航中使用中心標誌，這是我以前從未做過的事情。當點擊導航鏈接時，中心品牌略有移動

導航目前佈局如下。

<nav class="navbar navbar-default"> 
    <div class="nav-border"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
      <a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png" width="222" class="img-responsive"> </a> </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-left"> 
      <li><a href="/about-us/">About us</a></li> 
      <li><a href="/our-service/">Our service</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="/our-blog/">Our blog</a></li> 
      <li><a href="/hire-us/">Contact</a></li> 
      </ul> 
     </div> 

     <!--/.nav-collapse --> 
     </div> 
    </div> 
    <!--/.container-fluid --> 
    </nav>

和這裏的CSS兩個單獨的列表之間

.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 
.navbar { 
    background: #012d52; 
    border-radius: 0; 
    border:none; 
    font: 22px 'Playfair Display', serif; 
    text-transform: uppercase; 
    padding: 10px 0; 
} 
.nav-border { 
    border-top: 1px solid #576e81; 
    border-bottom: 1px solid #576e81; 
} 
.navbar-default .navbar-nav>li>a { 
    color: #fff; 
    text-decoration: none; 
} 
.navbar-default .navbar-nav>li>a:hover { 
    color: #acd1f0; 
} 
.navbar-brand { 
    padding: 0; 
    margin:0; 
    z-index: 20; 
} 
.navbar-brand>img { 
    height:auto; 
    width: 222px; 
    padding: 7px 14px; 
    margin-top: -77px 
} 
.navbar-right { 
    margin-right: 15%; 
} 
.navbar-left { 
    margin-left: 15%; 
} 
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { 
    margin-left: 0; 
} 
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { 
    background-color: transparent; 
} 
.navbar-default .navbar-toggle { 
    border-color: #576e81; 
} 
.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
    border-color: #576e81; 
}

擊可以稍微中班的標誌，我不知道爲什麼。我試着改變/使用固定寬度的CSS來玩，試圖找到一個解決方案，但我完全難住！

的代碼是基於something I found on Codepen

任何意見將大大appretiated。

來源

2016-12-28 Learning Code