Bootstrap 3 navbar center
<p>Hi just want to know why using this code</p>

<pre><code>.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
</code></pre>

<p>makes the navbar center its elements instead of making a new CSS style like-</p>

<pre><code>.navbarAlign {
    display: inline-block;
    float: none;
    text-align: center;
}
</code></pre>

<p>and putting it into the nav element's classes</p>

<pre><code>&lt;/div&gt;
    &lt;nav class="navbar navbar-inverse -----&gt; navbarAlign"&gt; &lt;-----
      &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="https://www.google.com" target="blank"&gt;VirusFun&lt;/a&gt;
        &lt;/div&gt;

        &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 "&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-center"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
..........
</code></pre>