title: How would I center the tabs in this code?
body: <p>I'm still not the best at making my own material so I've been learning by trying to edit around free to use code. However, I've run into a problem with this one in specific.</p>
  
  <p>While the site I'm using it on (Forumotion) does get rid of the weird white space you may see here. As much as I've searched for solutions and tweaked the CSS, I couldn't get the tabs to center without the whole thing getting all wonky.</p>
  
  <p>I've tweaked this a bunch of times in both Forumotion and JSFiddle to see if perhaps it was Forumotion that was the problem. However, nothing seemed to work. I'm thinking that it might be my lack of complete knowledge and understanding in CSS and HTML or the people who originally crafted this but I would appreciate any help that anyone can give.</p>
  
  <p><strong><a href="http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery" rel="nofollow noreferrer">SOURCE CODE</a></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e) {
      var currentAttrValue = jQuery(this).attr('href');
  
      // Show/Hide Tabs
      jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
  
      // Change/remove current tab to active
      jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  
      e.preventDefault();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tabs {
    width: 100%;
    display: inline-block;
  }
  
  .tab-links:after {
    display: block;
    clear: both;
    content: '';
  }
  
  .tab-links li {
    margin: 0px 5px;
    float: left;
    list-style: none;
  }
  
  .tab-links a {
    padding: 10px 15px;
    display: inline-block;
    background: #7FB5DA;
    font-size: 14px;
    font-weight: 600;
    color: #4c4c4c;
    transition: all linear 0.15s;
  }
  
  .tab-links a:hover {
    background: #a7cce5;
    text-decoration: none;
  }
  
  li.active a,
  li.active a:hover {
    background: #fff;
    color: #4c4c4c;
  }
  
  .tab-content {
    padding: 15px;
    border-radius: 3px;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
    background: #fff;
  }
  
  .tab {
    display: none;
  }
  
  .tab.active {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="tabs"&gt;
    &lt;ul class="tab-links"&gt;
      &lt;li class="active"&gt;&lt;a href="#tab1"&gt;Tab #1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab2"&gt;Tab #2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab3"&gt;Tab #3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab4"&gt;Tab #4&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
      &lt;div id="tab1" class="tab active"&gt;
        &lt;p&gt;Tab #1 content goes here!&lt;/p&gt;
        &lt;p&gt;Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="tab2" class="tab"&gt;
        &lt;p&gt;Tab #2 content goes here!&lt;/p&gt;
        &lt;p&gt;Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
          tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="tab3" class="tab"&gt;
        &lt;p&gt;Tab #3 content goes here!&lt;/p&gt;
        &lt;p&gt;Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="tab4" class="tab"&gt;
        &lt;p&gt;Tab #4 content goes here!&lt;/p&gt;
        &lt;p&gt;Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
          tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>