title: Why is using width:100% to make a table expand relatively to window size creates an undesired space?
body: <p>I'm trying to create a website that will adjust the size of table elements table cells relative to the size of the window, so that it will always fit inside the window. Here's what I have:</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>.table {
    display: table;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
  }
  
  .tablecell {
    display: table-cell;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
    &lt;div class="tablecell"&gt;
      &lt;image src="fb.png"&gt;
    &lt;/div&gt;
    &lt;div class="tablecell"&gt;
      &lt;image src="twitter.png"&gt;
    &lt;/div&gt;
    &lt;div class="tablecell"&gt;
      &lt;image src="youtube.png"&gt;
    &lt;/div&gt;
    &lt;div class="tablecell"&gt;
      &lt;image src="apple.png"&gt;
    &lt;/div&gt;
    &lt;div class="tablecell"&gt;
      &lt;image src="email.png"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What's messing this up is the <code>width:100%</code>. Here's a picture of the results. I circled the problem space in blue. Ignore Soulja Boy's face.</p>
  
  <p><a href="https://i.imgur.com/uhgbLoP.jpg" rel="nofollow noreferrer"><img src="https://i.imgur.com/uhgbLoP.jpg" alt=""></a></p>
  
  <p>Basically I just want this centered correctly so that the YouTube image is in the middle of the page. The space created by using <code>width:100%</code> prevents that, but I want to use this or a similar property so that the table will always fit inside the window.</p>