title: CSS center menu
body: <p>I have looked on here for the solution to this issue and I've tried a number of different ways to tackle it but to no success. I think I'm missing something when attempting to getting the menu to align in the center horizontally.</p>
  
  <p><a href="https://jsfiddle.net/x7yx3sd8/" rel="nofollow">https://jsfiddle.net/x7yx3sd8/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="ty-tabs cm-j-tabs clearfix"&gt;
      &lt;ul class="ty-tabs__list"&gt;
          &lt;li id="description" class="ty-tabs__item cm-js active"&gt;
              &lt;a class="ty-tabs__a"&gt;Description&lt;/a&gt;  
          &lt;/li&gt;    
          &lt;li id="features" class="ty-tabs__item cm-js active"&gt;
              &lt;a class="ty-tabs__a"&gt;Features&lt;/a&gt;  
          &lt;/li&gt; 
          &lt;li id="discussion" class="ty-tabs__item cm-js active"&gt;
              &lt;a class="ty-tabs__a"&gt;Review&lt;/a&gt;  
          &lt;/li&gt; 
      &lt;/ul&gt;    
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.clearfix:before, .clearfix:after {
      display: table;
      content: "";
      line-height: 0;
  }
  
  .clearfix:after {
      clear: both;
  }
  
  .clearfix:before, .clearfix:after {
      display: table;
      content: "";
      line-height: 0;
  }
  
  div {
      display: block;
  }
  
  body, p, div, li {
      color: #333;
      font-family: 'Roboto', sans-serif;
      font-size: 13px;
      font-style: normal;
      font-weight: normal;
  }
  
  ul {
      padding: 0;
      margin: 0;
      list-style: none;
  }
  
  .ty-tabs {
      margin-top: 4px;
      vertical-align: bottom;
      border-bottom: 1px solid #e7e7e7;
  }
  
  .ty-tabs__list {
      vertical-align: bottom;
  }
  
  .ty-tabs__item.active, .ty-tabs .subtab.active {
      background: #fff;
  }
  
  .ty-tabs__item, .ty-tabs .subtab {
      float: left;
      vertical-align: bottom;
      white-space: nowrap;
      cursor: pointer;
      border-radius: 0;
      margin: 2px 2px 0 0;
      padding: 0 0 0 3px;
      position: relative;
  }
  
  .ty-tabs__a, .ty-tabs .subtab a {
      display: block;
      margin: 8px 20px 0 20px;
      height: 23px;
  }
  
  a {
      font-family: 'Roboto', sans-serif;
      font-size: 13px;
      font-style: normal;
      text-decoration: none;
      outline: none;
      cursor: pointer;
  }
  </code></pre>