CSS - Padding on Display table overflow its container

Question

Example: http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php

Why is that the table div is going out from its container whenever I add padding?

Is there any work around for this problem?

<style>
.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;
}
}
</style>

<div class="foroContainer">
<div class="table">
    <div class="row">
        <div class="cell">asdasdasdas</div>
    </div>
    <div class="row">
        <div id="right" class="cell">asdasdas | asdasdsad | asdasdasdas</div>
    </div>
</div>

Answer 1

Alternatively, you could try altering the box-sizing property, either for every element on the page, or just that one container. E.g. for each element on the page, you would write:

* { box-sizing: border-box; }

This will alter the default box model that the browser uses so that width of the element is not changed, padding or not.

Answer 2

The hierarchy of encapsulation in CSS is: margin - border - padding

When you are adding padding to an object you practically alter it's width. If something is 100px in width and you add padding:10px it's width will become 120px (100 + 10 padding-left + 10 padding right)

This is the reason that your container is pushed over (it's width:100%) a good way would be another container internal to your table with width:100% but the table without width.