問題点

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

改善策

*{box-sizing:border-box;}

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