title: CSS - Padding on Display table overflow its container
body: <p>Example: <a href="http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php" rel="nofollow noreferrer">http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php</a></p>
  
  <p>Why is that the table div is going out from its container whenever I add padding? </p>
  
  <p>Is there any work around for this problem?</p>
  
  <pre><code>&lt;style&gt;
  .foroContainer {
      width: 700px;
      margin-left: auto; 
      margin-right: auto; 
      background: yellow;
  }
  
  .foroContainer .table{
      display: table;
      width: 100%;
      padding: 8px;
      border: 1px solid #a9a9a9;
      margin-bottom: 1em;
  }
  
  .foroContainer .row{
      display: table-row;
  }
  
  .foroContainer .cell{
      display: table-cell;
  }
  
  #right.cell{
      text-align: right;
      border-top: 1px solid #a9a9a9;
  }
  }
  &lt;/style&gt;
  
  &lt;div class="foroContainer"&gt;
  &lt;div class="table"&gt;
      &lt;div class="row"&gt;
          &lt;div class="cell"&gt;asdasdasdas&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div id="right" class="cell"&gt;asdasdas | asdasdsad | asdasdasdas&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>