position: fixed で右側のpaddingが消えたときの対処法

状況

ヘッダーを固定する際にposition: fixedを指定すると、右側のpaddingが消えてしまった。
それにより、右側のコンテンツが切れるという事態が生じた。

対処法

スタイルを変更する。

1. width: 100%を無くす
2. left: 0, right: 0を指定する

上記により、widthを指定せずに、左右いっぱいにヘッダーが広げることが出来る。

まとめ

普段フロント触らないので、こういう小さなところでも躓いてしまう。
css難しいな。。。
もっと網羅的に勉強していきたい。