Centering The Bootstrap Navbar

I’ve been searching for a while on how to centre the Nav bar in a bootstrap fluid container.

Finally after hours of Googling, I came across this CSS snippet –


.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}

Source: http://codepen.io/davidcochran/pen/rcHae

Applying this to my Navbar allows me to centre it as per the source example.


<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="pull-left"><a class="navbar-brand" href="/"><img src="/img/navbar/logo.png" /></a></li>
<li><a class="navbar-brand" href="/blog">Blog</a></li>
<li><a class="navbar-brand" href="/archives">Archives</a></li>
<li><a class="navbar-brand" href="/contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</nav>


This present me with a nicely centered navbar like this –

Nicely Centred Navigation with a logo on the left