title: How to center horizontal table-cell
body: <p>I want the Content A, Content B, and Content C columns to be horizontally centered. I have this code been trying to add</p>
  
  <p><a href="http://jsfiddle.net/hsX5q/24/" rel="noreferrer">http://jsfiddle.net/hsX5q/24/</a> </p>
  
  <p>HTML:margin: 0 auto to .columns-container and it doesn't work. Could anyone help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*************************
   * Sticky footer hack
   * Source: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
   ************************/
  
  /* Stretching all container's parents to full height */
  
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  /* Setting the container to be a table with maximum width and height */
  
  #container {
    display: table;
    height: 100%;
    width: 100%;
  }
  /* All sections (container's children) should be table rows with minimal height */
  
  .section {
    display: table-row;
    height: 1px;
  }
  /* The last-but-one section should be stretched to automatic height */
  
  .section.expand {
    height: auto;
  }
  /*************************
   * Full height columns
   ************************/
  
  /* We need one extra container, setting it to full width */
  
  .columns-container {
    display: table-cell;
    height: 100%;
    width: 300px;
    margin: 0 auto;
  }
  /* Creating columns */
  
  .column {
    /* The float:left won't work for Chrome for some reason, so inline-block */
    display: inline-block;
    /* for this to work, the .column elements should have NO SPACE BETWEEN THEM */
    vertical-align: top;
    height: 100%;
    width: 100px;
  }
  /****************************************************************
   * Just some coloring so that we're able to see height of columns
   ****************************************************************/
  
  header {
    background-color: yellow;
  }
  #a {
    background-color: pink;
  }
  #b {
    background-color: lightgreen;
  }
  #c {
    background-color: lightblue;
  }
  footer {
    background-color: purple;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;header class="section"&gt;
      foo
    &lt;/header&gt;
  
    &lt;div class="section expand"&gt;
      &lt;div class="columns-container"&gt;
        &lt;div class="column" id="a"&gt;
          &lt;p&gt;Contents A&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="column" id="b"&gt;
          &lt;p&gt;Contents B&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="column" id="c"&gt;
          &lt;p&gt;Contents C&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;footer class="section"&gt;
      bar
    &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>