Bootstrap "navbar-brand" causing "navbar-nav" items to shift right from centered position in nav bar?
<p>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:</p>

<p><img src="https://i.stack.imgur.com/SgjMe.png" alt="current state of nav bar"></p>

<p>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: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Navigation bar --&gt;
&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
  &lt;div class="container-fluid"&gt;
    &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
    &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="index.html" id="logo"&gt;LOGO&lt;/a&gt;
    &lt;/div&gt;

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

<p>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. </p>

<p>For example, when I change the text-align to "left":</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar .navbar-collapse {
  text-align: left;
  background-color: cyan;
}</code></pre>
</div>
</div>
</p>

<p>the navigation bar looks like this: 
<img src="https://i.stack.imgur.com/AMPnE.png" alt="navbar-collapse text-align left"></p>

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

<p>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. </p>

<p>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?</p>