title: Center an element in Bootstrap Navbar
body: <p>No matter what I try, I can't center something in Bootstrap navbar, any solutions for it? </p>
  
  <p>I've tried adding a div, using <code>margin:0 auto;</code> or <code>margin-right:auto; margin-left:auto;</code>, used <code>center-block</code> class. Nothing works, why is so hard to achieve something so simple I can't understand, what I'm doing wrong?</p>
  
  <p>Here's the current code :</p>
  
  <pre><code>&lt;nav class="navbar navbar-fixed-top navbar-dark main-nav"&gt;
  &lt;div class="container"&gt;
      &lt;ul class="nav navbar-nav pull-left"&gt;
          &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Download&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Register&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="nav navbar-nav text-center"&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Website Name&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="nav navbar-nav pull-right"&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Rates&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Help&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>