【CSS】ヘッダーを固定したら、メニューが左寄せになってしまった！　を解決します　

プログラミングを勉強中のみなさん、こんにちは！

今回は、ヘッダーを固定したら、メニューが左寄せになってしまった！
というエラーの解決方法を紹介します。

とっても簡単ですので、是非参考にしてください。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

実体験

過去に、ポートフォリオ用にデモサイトを作成していたときです。

「ようし、ヘッダー完成！」
（左端）ロゴ・・・・・・（右端）メニュー１メニュー2メニュー3
こんな感じです。

「あ、そうだ、スクロールしてもヘッダーが見えるように位置を固定しておこう」

得意気にCSSで「position:fixed;」を設定しました。

完璧、と思い、実際にプレビューを見てみると、

「あれ、ヘッダーのロゴとメニューが左寄せになってる！！」
「ロゴが左端、メニューは右端に設定したはずなのに・・・」

（左端）ロゴ メニュー１メニュー2メニュー3

こんなエラーでした。

解決コード

CSSの「position:fixed;」の次に、

「width:100%;」

を追記してください。

positionを固定すると、どうやら幅を認識しなくなるみたいです。

まとめ

いかがでしたでしょうか。

ほとんどの方が、ヘッダーでflexをすると思いますので、
「position:fixed;」と「width:100%;」は、
セットで覚えておくといいかもしれませんね。

ヘッダー関連の記事も紹介しておきます。