title: Difficulties Centralising price tables and a button
body: <p>I'm finding it difficult  centralise these price tables and also centralise the Enquiries  button under the price tables without affecting the footer. I  Tried couple of things but it ended overlaying the content on the footer</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-css lang-css prettyprint-override"><code>{
      box-sizing: border-box;
  }
  
  .columns {
      float: left;
      width: 33.3%;
      padding: 8px;
  }
  
  .price {
      list-style-type: none;
      border: 1px solid #eee;
      margin: 0;
      padding: 0;
      -webkit-transition: 0.3s;
      transition: 0.3s;
  }
  
  .price:hover {
      box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
  }
  
  .price .header {
      background-color: #111;
      color: white;
      font-size: 25px;
  }
  
  .price li {
      border-bottom: 1px solid #eee;
      padding: 20px;
      text-align: center;
  }
  
  .price .grey {
      background-color: #eee;
      font-size: 20px;
  }
  
  .button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      font-size: 18px;
  }
  
  @media only screen and (max-width: 600px) {
      .columns {
          width: 100%;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="plantitle"&gt;
  &lt;h2 style="text-align:center"&gt;DOLLAR COMPENSATION PLANS&lt;/h2&gt;
  &lt;p style="text-align:center"&gt;Choose A Plan to Sign-Up&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="pricealign"&gt;
  &lt;div class="columns"&gt;
    &lt;ul class="price"&gt;
      &lt;li class="header"&gt;$10 – 85% payout&lt;/li&gt;
      &lt;li class="grey"&gt;Level 1 - 5 = $25&lt;/li&gt;
      &lt;li&gt;Level 2 – 25 = $106.25&lt;/li&gt;
      &lt;li&gt;Level 3 – 125  =  $531.25&lt;/li&gt;
      &lt;li&gt;Level 4 – 625 = $2,656.25&lt;/li&gt;
      &lt;li&gt;Level 5 – 3125 = $13,281.25&lt;/li&gt;
      &lt;li class="grey"&gt;&lt;a href="#" class="button"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="columns"&gt;
    &lt;ul class="price"&gt;
      &lt;li class="header" style="background-color:#4CAF50"&gt;$20 – 85% payout&lt;/li&gt;
      &lt;li class="grey"&gt;Level 1 - 5 = $60&lt;/li&gt;
      &lt;li&gt;Level 2 – 25 = $170&lt;/li&gt;
      &lt;li&gt;Level 3 – 125 = $850&lt;/li&gt;
      &lt;li&gt;Level 4 – 625 = $4,250&lt;/li&gt;
      &lt;li&gt;Level 5 – 3125 = $21,250&lt;/li&gt;
      &lt;li class="grey"&gt;&lt;a href="#" class="button"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="columns"&gt;
    &lt;ul class="price"&gt;
      &lt;li class="header"&gt;$50 – 85% payout&lt;/li&gt;
      &lt;li class="grey"&gt;Level 1 - 5 = $100&lt;/li&gt;
      &lt;li&gt;Level 2 – 25 = $637.5&lt;/li&gt;
      &lt;li&gt;Level 3 – 125 = $3,187.5&lt;/li&gt;
      &lt;li&gt;Level 4 – 625 = $15,937.5&lt;/li&gt;
      &lt;li&gt;Level 5 – 3125 = $79,687.5&lt;/li&gt;
      &lt;li class="grey"&gt;&lt;a href="#" class="button"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt; 
  
  &lt;div class="columns"&gt;
    &lt;ul class="price"&gt;
      &lt;li class="header"&gt;$50 – 85% payout&lt;/li&gt;
      &lt;li class="grey"&gt;Level 1 - 5 = $100&lt;/li&gt;
      &lt;li&gt;Level 2 – 25 = $637.5&lt;/li&gt;
      &lt;li&gt;Level 3 – 125 = $3,187.5&lt;/li&gt;
      &lt;li&gt;Level 4 – 625 = $15,937.5&lt;/li&gt;
      &lt;li&gt;Level 5 – 3125 = $79,687.5&lt;/li&gt;
      &lt;li class="grey"&gt;&lt;a href="#" class="button"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt; 
  
  &lt;/div&gt;
  &lt;script&gt;
  var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
      acc[i].onclick = function(){
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      }
  }
  &lt;/script&gt;
          
  &lt;div class="planenq"&gt;
  &lt;div class="container"&gt;
      &lt;button class="button"&gt;&lt;span&gt;&lt;a href="#"&gt;For Enquiries&lt;/a&gt; &lt;/span&gt;&lt;/button&gt;
      
      &lt;/div&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>