質問: 疑問点:headerとfooter要素が画面右に引っ張られる要因を教えていただけますでしょうか。。 【詳細】 下記のコードでレイアウトの勉強をしておりますが、全体を中央揃いにしたいものの、なぜタグで囲った要素が右にズレてしまうのか、ご教示いただけませんでしょうか。 【試したこと】 mainセレクタのプロパティーはシンプルにmargin: 0 auto;にしてみた。 検証ツールで他の要因を調べた。 【コード】 HTML 課題 これはヘッダーです これは400x400pxの画像です。ここに画像を並べています。 この文字も要素として表示するようにしてください ここは500x500pxの画像です。ここに画像を並べています。 この文字も要素として表示するようにしてください これはフッターです CSS main{ width: 900px; position: relative; margin: 0 auto; } header { width: 100%; height: 50px; margin-top:2px; position: fixed; top: 0px; background-color: pink; border: 1px solid; } footer{ width: 100%; height: 50px; position: fixed; bottom: 0px; background-color: pink; border: 1px solid; margin-bottom:2px; } header > p{ position: absolute; font-size: 0.5em; top: 0; left: 100px; color:#fff; } footer > p{ position: absolute; font-size: 0.5em; top: 0; left: 100px; color:#fff; font-size: 0.7em; } .first{ position: absolute; top: 52px; left: 200px; width: 400px; height: 400px; } .image1{ display: block; position: absolute; width: 400px; height: 400px; } .first > p{ position: absolute; top: 2px; left: 2px; color: red; font-size: 0.7em; z-index:1; } .second{ width: 500px; height: 500px; position: absolute; top: 60px; left: 550px; } .image2{ display: block; position: absolute; width: 400px; height: 400px; } .second > p{ position: absolute; top: 10px; left: 10px; color: red; font-size: 0.7em; width: 380px; } ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9e01cc943ef483f8d2f0cf5a248bcdf5.png)
回答: > > 下記のコードでレイアウトの勉強をしておりますが、全体を中央揃いにしたいものの、なぜタグで囲った要素が右にズレてしまうのか、ご教示いただけませんでしょうか。 > > > 要素に`position: fixed;`が設定されているからです。 文書の通常のフローから除外されて、ビューポート(スクリーン)が基準になります。 よって、`width: 100%;`とすると要素の幅はスクリーン幅になります。 position - CSS: カスケーディングスタイルシート | MDN 内に収めたいなら、と同じ幅を設定すればいいでしょう。 ``` header { width: 900px; height: 50px; margin-top:2px; position: fixed; top: 0px; background-color: pink; border: 1px solid; } ```