このjsfiddle http://jsfiddle.net/byronyasgur/kUgBA/3/では、右側の赤を黄色と完全に一致させようとしていますが、内側のボックスの幅を338pxにする必要がある理由に混乱しています。またはその図が何に関連しているか。それを少しでも減らすと、3 番目のボックスが次の行に飛び出します。
このデザインにはボックスがいくつあってもよいという事実を表すために、4 つのボックスがあります。
HTML
<div id="outer">
<div id="container" >
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
</div>
</div>
CSS
#outer{
width:330px;
margin: 0 auto;
padding: 0;
background: yellow;
}
#container{
/* background: orange; */
padding: 0;
margin-left: -5px;
margin-right: -5px;
width:338px;
}
.content {
width: 100px;
background: red;
margin: 5px;
display: inline-block;
height: 40px;
}