Bootstrap 3 navbar center - css

Question

Hi just want to know why using this code
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
makes the navbar center its elements instead of making a new CSS style like-
.navbarAlign {
display: inline-block;
float: none;
text-align: center;
}
and putting it into the nav element's classes
</div>
<nav class="navbar navbar-inverse -----> navbarAlign"> <-----
<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="https://www.google.com" target="blank">VirusFun</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 ">
<ul class="nav navbar-nav">
<li></li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li>Link</li>
<li>Link</li>
..........

Answer 1

If you want to get the right answer it would be better if you ask it clearly but
if you want to centralize the content inside the nav you should use:
.navbar {
text-align: center;
}
Because the navbar is the parent and what ever alignment you are defining inside it will affect to all the elements.
But if you want to centralize the navbar itself in the page use :
.navbar {
display: flex;
align-items: center;
justify-content: center;
}
Hopefully it helps you :)