Bootstrap "navbar-brand" causing "navbar-nav" items to shift right from centered position in nav bar?

Question

I am trying to create a navigation bar that has the "brand" (LOGO) on the left side, and the actual navigation items in the center of the entire bar. I am using the default Bootstrap navbar as I just started to learn web development a week ago. This is what it looks like so far:

However, you can see the navigation items are slightly shifted to the right of the actual center of the page (The heading "This is the HOME page." is exactly centered within the page). Here are parts of my code that I believe may be relevant:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-fluid {
  background-color: white;
  border: none;
  box-shadow: none;
}
.content {
  padding-top: 65px;
  width: 100%;
  height: 100%;
}
.navbar .navbar-collapse {
  text-align: center;
  background-color: cyan;
}
.navbar .navbar-nav {
  margin: 1%;
  display: inline-block;
  float: none;
  vertical-align: center;
  text-decoration: bold;
  text-align: center;
}
.navbar-default {
  background-color: white;
  box-shadow: none;
  text-align: center;
}
.navbar-header {
  margin: 1%;
}

<!-- Navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="index.html" id="logo">LOGO</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
  <!-- /.navbar-collapse -->
</div>
  <!-- /.container-fluid -->
</nav>

I am suspicious of the "navbar-brand" as it seems to interfere somehow when I try to change the text-align for ".navbar .navbar-collapse," (colored cyan just for ease of formatting) which I have set to "center" as other answers on StackOverflow have suggested.

For example, when I change the text-align to "left":

.navbar .navbar-collapse {
  text-align: left;
  background-color: cyan;
}

the navigation bar looks like this:

Changing the text-align to "right" pushes the navigation items all the way over to the right side of the cyan bar, as expected.

Thus, it appears that the navigation items are being centered between the "navbar-brand" and the right side of the bar rather than between the actual left and right sides of the entire bar.

Does anyone have any suggestions on how to make my navigation items accurately centered within the entire bar, so that they are in line with the heading "This is the HOME page." and not shifted to the right?

Answer 1

There are a few different ways to do this, and I guess it depends on what you are going to do further down the track, but the easiest thing is probably to take the .navbar-brand out of the document flow, so that the .navbar-nav ignores it when centering.

You can do this quite easily by adding something like this:

.navbar-brand {
  position: absolute;
}

You can check it out over here: http://codepen.io/anon/pen/PNMBQx

Hope that helps, and good luck!