Centered Marke bewegt sich leicht beim Klicken zwischen Navigationslinks

Question

Ich baue eine Website für jemanden kostenlos mit Bootstrap. Ich bin ein bisschen ein Amateur am Code und habe dummerweise beschlossen, ein zentriertes Logo in meiner Header-Navigation zu verwenden, etwas, das ich noch nie zuvor gemacht habe.

Die Navigation ist derzeit so angelegt.

<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> 

und hier ist die 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; 
} 

Klick zwischen den beiden separaten Listen macht das Logo in der Mitte Verschiebung leicht und ich habe keine Ahnung, warum. Ich habe versucht, CSS mit festen Breiten zu ändern/zu spielen, um zu versuchen, eine Lösung zu finden, aber ich bin völlig ratlos!

Der Code basiert auf something I found on Codepen

Jede Beratung wäre sehr appretiated werden.

Answer 1

Seufz ... Ich habe es gerade herausgefunden.

Die zwei Links auf der rechten Seite enthalten Inhalte auf ihren Seiten, die dazu führen, dass die Browser-Bildlaufleiste angezeigt wird. Dadurch wird die Breite des Fensters reduziert. Die anderen beiden Links auf der linken Seite gehen auf Seiten, die noch keinen Inhalt haben.

Lustig, wie Sie immer eine Lösung finden, nur nachdem Sie um Hilfe gebeten haben!