CSSのpaddingが入らない問題の解決方法

問題

paddingが右にも入るはずが入らない。

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

解決方法

width: 100%に加えて、左右のpadding: 10px分がはみ出てしまっていた。
box-sizingプロパティを追加することで解決できた。

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* これを追加 */
}

終わりに

どこが悪いのかすぐに分からず、難しかったです。
box-sizing: border-box;を追加することで、paddingが正しく適用されるようになりました。