title: Spacing and centering bootstrap navbar items
body: <p>I am making an eCommerce website and want these three elements on my navbar: Logo on the left, the product categories in the middle, and the avatar on the right.  I am trying to put the categories in the middle, but they just aren't moving.  They are fixed next to the avatar.</p>
  
  <pre><code>&lt;ul class="navbar-nav"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;%= link_to "Diary", "#", class: "nav-link" %&gt;
        &lt;/li&gt;
        &lt;li class="nav-item active"&gt;
          &lt;%= link_to "Pen", "#", class: "nav-link" %&gt;
        &lt;/li&gt;
        &lt;li class="nav-item active"&gt;
          &lt;%= link_to "Tape", "#", class: "nav-link" %&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>I am trying text-align center, giving the UL a new class, inline-block, but nothing is working.  I am not sure where to give a new class or where to change the options.  Can I center it via the ul class or do I need to go into the div holding all the elements?  I only want to center the above items.</p>