title: Fixing the view of display: table property
body: <p>I've tried to add a <code>display:table</code> to a parent element (rowcontainer) and <code>display:table-cell;</code> to the child element (div1, div2) for over 500px width on screen. This worked, but the padding on the child elements now have to left or right padding, and the bottom row has something off with it, any ideas on how to fix this? :<br>
  <br>Here is also a codepen of the problem:<br>
  <a href="http://codepen.io/anon/pen/MYxegN" rel="nofollow">http://codepen.io/anon/pen/MYxegN</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width: 499px) {
    .div1,
    .div2 {
      color: blue;
    }
  }
     
  #pagewrap {
    padding: 10px;
    background-color: rgba(21, 21, 21, 0.75);
    border: 1px red solid;
    max-width: 1024px;
    min-height: 87.5% height: inherit;
    margin: 0 auto;
  }
  h1,
  h2 {
    color: white;
  }
  p {
    color: silver;
  }
  #tablecontainer {
    padding: 5px 5px 5px 0px;
    width: 100%;
    min-height: 100%;
    color: white;
    font-size: 20px;
  }
  .div1,
  .div2 {
    padding: 5px;
    margin: 5px;
  }
  .div1 {
    background-color: darkgreen;
    padding: 5px;
  }
  .div2 {
    background-color: green;
  }
  @media screen and (min-width: 500px) {
    .rowcontainer {
      padding: 2.5px;
      display: table;
      width: 100%;
    }
    .rowcontainer div {
      display: table-cell;
    }
    .div1 {
      padding: 1.25px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pagewrap"&gt;
  
    &lt;div id="tablecontainer"&gt;
  
      &lt;div class="rowcontainer"&gt;
        &lt;div class="div1"&gt;1&lt;/div&gt;
        &lt;div class="div2"&gt;2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rowcontainer"&gt;
        &lt;div class="div1"&gt;3&lt;/div&gt;
        &lt;div class="div2"&gt;4&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rowcontainer"&gt;
        &lt;div class="div1"&gt;5&lt;/div&gt;
        &lt;div class="div2"&gt;6&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rowcontainer"&gt;
        &lt;div class="div1"&gt;7&lt;/div&gt;
        &lt;div class="div2"&gt;9&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rowcontainer"&gt;
        &lt;div class="div1"&gt;9&lt;/div&gt;
        &lt;div class="div2"&gt;10&lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>