レイアウト崩れをなおす（box-sizing: border-box;）

width:25%などのようにパーセントで横幅を指定し、４つの要素を並べたい場合、それにpaddingを追加してしまうと25%＋padding分の大きさが確保され、最後の上手くレイアウトができなくなります。
これを解消するのが、box-sizing: border-box;　です。

box-sizing:border-box;はwidthの合計にpaddingとborderを含まれるようにする設定です。

これを適用することでpadding分も含めて25%で収まるように指定ができます。

※marginは含まれないので注意

指定には全ての要素に対して適用することが推奨されています。
アスタリスク*で全てに適用することができます。

*｛box-sizing:border-box;}