box-sizingの使い方です。
cssを扱ったことがある人ならだいたいpaddingやmarginでサイズがおかしくなった経験があるでしょう。
例えば
width: 300px;
padding: 8px;
margin: 10px;
と書いた時、
実際のwidthは300+8*2+10*2で336pxとなってしまいます。
(画像はmarginが入っていませんが)
このせいで、floatなどを使うとサイズが合わなくてブロックが下に表示されてしまいます。
それを防ぐためには、box-sizingというstyleを適用してあげましょう。
box-sizing: border-box;
こんなふうに書いてあげるだけで、margin、paddingは内側に入るようになります。
当然中に入る文字列は少し短くなりますが。
floatを使う場合、これを知っておくと非常に便利なので覚えておきましょう。