title: align a horizontals menu li items
body: <p>I am having real troubles with trying to align a horizontal menu.So far my menu is looking like
  <img src="https://i.stack.imgur.com/Dqc81.png" alt="enter image description here"> </p>
  
  <p>I have 2 centered elements to make up the menu in the image you can see a gray border (slide-nav class) that has been centered within the page. Now I am trying to do the same for the menu</p>
  
  <p>I have had to hard code the li widths but ideally I would like them to fit automatically. Is it possible without javascript to align the menu items in the center?</p>
  
  <p>My html </p>
  
  <pre><code>   &lt;nav class="slide-nav"&gt;
              &lt;ul class="slider"&gt;
                  &lt;li class="selected"&gt;
                      &lt;div&gt;
                          &lt;span class="heart"&gt;&lt;/span&gt;
                          &lt;div&gt;
                              Get Started&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div&gt;
                          &lt;span class="price-tag"&gt;&lt;/span&gt;
                          &lt;div&gt;
                              Get Results&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div&gt;
                          &lt;span class="star"&gt;&lt;/span&gt;
                          &lt;div&gt;
                              Track &amp; Engage&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div&gt;
                          &lt;span class="people"&gt;&lt;/span&gt;
                          &lt;div&gt;
                              Features&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.slide-nav
  {
  border-bottom: solid 1px #f2f2f2;
  margin: 0 auto;
  width: 856px;
  }
  .slider
  {
  list-style: none;
  height: 38px; 
  margin: 0 auto;
  width: 722px;
  }
  .slider li
  {
  border-bottom: solid 7px transparent;
  cursor: pointer;
  
  display: inline-block;
  width: 150px;
  }
  .slider li div 
  {
  line-height: 31px; 
  }
  .slider li div div 
  {
  text-indent: 6px;
  }
  .slider li.selected &gt; div
  {
  border-bottom: solid 7px #592970;
  
  }
  </code></pre>