how to make nav brand centrally aligned - html

Question

I have the following code, what I'm trying to do is get the nav logo centered with equal pixels either side so the link on the left and right have the same distance between them.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href='#Url.Action("Index", "Home")'></a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>#Html.ActionLink("PRODUCTS", "Products", "Products")</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>VISIT US: <b>f</b></li>
</ul>
</div>
</div>
</nav>
and this is my CSS
.navbar-brand {
background-image: url("/Content/Images/Brand-Background-New5.png");
background-repeat: no-repeat;
display: block;
height: 94px;
left: 42%;
margin: auto;
position: absolute;
text-align: center;
top: 16%;
width: 301px;
z-index: 9999;
}
now on large screens i.e dessktops the above works fine, but when I minimize the browser, or someone opens the website on say a 15 inch laptop the navbar-brand is no longer centered it appears more to the right? how can I lock it so it stays centered regardless of the screen size

Answer 1

You can use the CSS calc() function: css calc tutorial
What's happening is that on a small screen, 42% is the space to the left of the nav, the nav itself is taking up like 50% of the screen (since its so small) and you're left with 2% to the right.
What's the width of your nav? width: 301px;
What's the total width of a computer screen? 100%
So the space to the left of a perfectly centered nav should be: (100%-301px)/2
Solving the equation we get: 50%-150px
Just fix that one line in your CSS code to say:
left: calc(50% - 150px);
THE SPACES AROUND THE - (minus) SIGN ARE IMPORTANT
The resulting CSS should be:
.navbar-brand {
background-image: url("/Content/Images/Brand-Background-New5.png");
background-repeat: no-repeat;
display: block;
height: 94px;
left: calc(50% - 150px);
margin: auto;
position: absolute;
text-align: center;
top: 16%;
width: 301px;
z-index: 9999; }