position: fixed;は、スクロールしてもその部分を固定して動かさないことができます。
しかし、他のセクションと幅がずれます。
それが下の動画のように、ぴったりと合って可変するコードを紹介します。
しょーご中級の課題は、スクロールしてもヘッダーを動かさないようにすること。
最初に作り始めた時は、画面幅が1366pxで作ります。
その時は下のように合うのですが・・・。
いざレスポンシブに対応しようとすると、
ヘッダーが、下にある全てのセクションとずれることに気づきます。
↓画面幅を小さくした時
（ヘッダーが右にずれています。）
↓大きくした時（ヘッダーが左にずれています。）
コードは下記。
ググりまくって、どうやらwidthは100%ではなく、
100vwにするといいらしいことにたどりつきます。
すると・・・
↓画面を小さくした時（ぴったり合っています。）
ヘッダーと下のセクションがぴったり合って縮小されるようになりました！！
しかし、、、
画面幅を大きくすると、、、
また、ずれてしまいます。（ヘッダーが左にずれています。）
また、ググります。。。
すると、
お待たせしました。
下記のコードで、
最初にあった動画のように、画面を小さくしても大きくしても合うようになります。
まとめ
width: 100vw;
left: 50vw;
transform: translateX(-50%);
にすると、ずれることなく、中央に表示されます。
（備忘録的に書いていますので、説明不足はご了承ください。）
コメント