问奇怪的三个div并排在一起

EN

<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
    <div id="Line1Container">
    <div id="container1" class="container">1
    </div>
    <div id="container2" class="container">2
    </div>
    <div id="container3" class="container">3
    </div>
</div>
<div id="Line2Container">
    <div id="container4" class="container">4
    </div>
    <div id="container5" class="container">5
    </div>
    <div id="container6" class="container">6
    </div>
</div>
</div>
</div>

#mainContainer {
    border: 1px solid lightgray;
    position:fixed;
    top: 80px;
    bottom:20px;
    left:80px;
    right:80px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#topContainer {
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 24px;
}

#table {
    display: table;
    margin: 24px;
    width: 95%;
}

#Line1Container, #Line2Container {
    display: table-row;
}

.container  {
    border: 1px solid lightgray;
    display: table-cell;
    width: 33%;
    border-radius: 10px;
}