レイアウトの配置問題

疑問点：headerとfooter要素が画面右に引っ張られる要因を教えていただけますでしょうか。。

【詳細】
下記のコードでレイアウトの勉強をしておりますが、全体を中央揃いにしたいものの、なぜ<main>タグで囲った<header><footer>要素が右にズレてしまうのか、ご教示いただけませんでしょうか。

【試したこと】
mainセレクタのプロパティーはシンプルにmargin: 0 auto;にしてみた。
検証ツールで他の要因を調べた。

【コード】
HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>課題</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <main> <header> <p>これはヘッダーです</p> </header> <div class="first"> <img src="img/ability_history.jpg" class="image1"> <p>これは400x400pxの画像です。ここに画像を並べています。この文字も要素として表示するようにしてください </p> </div> <div class="second"> <img src="img/ability_history.jpg" class="image2"> <p>ここは500x500pxの画像です。ここに画像を並べています。この文字も要素として表示するようにしてください </p> </div>

<footer>
    <p>これはフッターです</p>
</footer>

</main> </body> </html>

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;

}

行動規範の内容に同意します

回答1件

ベストアンサー

下記のコードでレイアウトの勉強をしておりますが、全体を中央揃いにしたいものの、なぜ<main>タグで囲った<header><footer>要素が右にズレてしまうのか、ご教示いただけませんでしょうか。

<header><footer>要素に`position: fixed;`が設定されているからです。文書の通常のフローから除外されて、ビューポート（スクリーン）が基準になります。よって、`width: 100%;`とすると要素の幅はスクリーン幅になります。

position - CSS: カスケーディングスタイルシート | MDN

<main>内に収めたいなら、<main>と同じ幅を設定すればいいでしょう。

css
1header {
2  width: 900px;
3  height: 50px;
4  margin-top:2px;
5  position: fixed;
6  top: 0px;
7  background-color: pink;
8  border: 1px solid;
9}