padding によるレイアウトの崩れ

問題点

要素の幅を100%に設定している時に、その要素にpaddingを設定してしまうと、要素の幅の合計が100%を超えてしまいレイアウトが崩れてしまう。

改善策

* {
  box-sizing: border-box;
}

全ての要素に対してbox-sizing: border-box;を適用し、要素の幅の合計(width)にpadding,borderを含めるようにすることでレイアウトの崩れを防ぎ、この問題を解決することができる。