ナビゲーションリンクをクリックすると、中心のブランドが少し動く

Question

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> 

と、ここ2つの別々のリストの間で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を変更/再生しようとしたソリューションを見つけるが、私は完全に困惑している！

コードが何かアドバイスが大幅appretiatedされるだろうsomething I found on Codepen

に基づいています。

Answer 1

一言...私はそれを理解しました。

右側の2つのリンクには、ブラウザのスクロールバーが表示されるページのコンテンツが含まれています。これはウィンドウの幅を縮小しています。左側の他の2つのリンクは、コンテンツがまだ追加されていないページに移動します。

助けを求めた直後にいつも解決策を見つけるのに面白い！