Centered brand moving slightly when clicking between navigation links - html

Question

I'm building a website for somebody free of charge using Bootstrap. I'm a bit of an amateur at code and foolishly decided to use a centered logo in my header navigation, something I've never done before.
The navigation is currently laid out like this.
<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>About us</li>
<li>Our service</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Our blog</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!--/.container-fluid -->
</nav>
and here's the 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;
}
clicking between the two seperate lists makes the logo in the middle shift slightly and I have no idea why. I've tried altering/playing with the CSS using fixed widths to try and find a solution but I'm completely stumped!
The code is based on something I found on Codepen
Any advice would be greatly appretiated.

Answer 1

Sigh...I've just figured it out.
The two links on the right hand side contain content on their pages which cause the browsers scrollbar to appear, this is reducing the width of the window. The other two links on the left hand side go to pages which do not have any content added yet.
Funny how you always find a solution just after you've asked for help!