ヘッダーを固定したら wrapperが効かなくなってしまいました。なぜでしょうか？

position : fixed;でヘッダーを固定したところ
class="wrapper"で左右に余白を作っていましたが、左端に寄ってしまいました。
誤字がないか確認したり、コードを入力し直したりしました。半日試行錯誤しましたが、どうしてもwrapperが効きません、、なぜだか分かる方いらっしゃいますか？

html
1<!doctype html>
2<html>
3<head>
4<link rel="stylesheet" href="css/style.css">
5<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
6<meta charset="UTF-8">
7<title>grid design</title>
8</head>
9<body>
10	<header class="wrapper">
11		<h1 class="wrapper"><strong>Grid Design</strong></h1>
12		<div class="sp-menu">
13			<span class="material-icons" id="open">menu</span>
14		</div>
15		<div class="overlay">
16			<span class="material-icons" id="close">close</span>
17			<nav>
18				<ul class="wrapper">
19					<li><a href="#">PRODUCT</a></li>
20					<li><a href="#">ABOUT</a></li>
21					<li><a href="#">COMPANY</a></li>
22					<li><a href="#">CONTACT</a></li>
23				</ul>
24			</nav>
25		</div>
26		
27	</header>
28	
29	<section id="photo" class="wrapper">
30		<ul class="kontena">
31			<li><a href=""><img src="img/item1.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li>
32			<li><a href=""><img src="img/item2.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li>
33			<li><a href=""><img src="img/item3.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li>
34			<li><a href=""><img src="img/item4.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li>
35			<li><a href=""><img src="img/item5.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li>
36			<li><a href=""><img src="img/item6.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li>
37			<li><a href=""><img src="img/item7.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li>
38			<li><a href=""><img src="img/item8.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li>
39		</ul>
40	</section>
41	<footer class="wrapper">
42		<ul>
43			<li><a href="" target="blank">INSTAGRAM</a></li>
44			<li><a href="" target="blank">TWITTER</a></li>
45			<li><a href="" target="blank">FACEBOOK</a></li>
46		</ul>
47		<p class="copyright">©︎Grid design</p>
48	</footer>
49	<script src="js/main.js"></script>
50</body>
51</html>

css
1@charset "UTF-8";
2/* CSS Document */
3body{
4	font-size: 1rem;
5	margin-bottom: 500px;
6}
7.wrapper{
8	width: 1300px;
9	margin: 0 auto;
10	background-color: pink;
11}
12h1{
13	font-size: 1.2rem;
14	padding: 15px 0 15px 0;
15}
16
17.kontena{
18	display: grid;
19	width: 100%;
20	height: auto;
21	grid-template-columns: auto auto auto auto;
22	grid-auto-rows: auto auto;
23	gap: 35px;
24	padding: 0;
25	padding-top: 100px;
26}
27.item{
28	width: 100%;
29	margin-bottom: 5px;
30}
31li{
32	list-style: none;
33}
34#photo p{
35	font-size: 0.75rem;
36	margin: 0;
37}
38a{
39	text-decoration: none;
40	color: black;
41	transition: all 0.5s;
42}
43a:hover {
44  opacity: 0.7;
45}
46/*フッター*/
47footer{
48	max-width: 100%;
49	display: flex;
50	justify-content: space-between;
51}
52footer li{
53	margin-right: 20px;
54}
55
56footer ul{
57	display: flex;
58	padding: 0;
59	margin-bottom: 5px;
60}
61footer a{
62	text-decoration: none;
63	font-size: 0.75rem;
64}
65.copyright{
66	padding: 0;
67	font-size: 0.5rem;
68}
69
70
71/*ハンバーガーメニュー*/
72header{
73	display: flex;
74	justify-content: space-between;
75	position: fixed;
76	z-index: 999;
77	padding: 0;
78	margin: 0;
79	background: rgba(200,255,255,1);
80}
81
82.sp-menu #open{
83	padding: 15px 0 15px 0;
84	font-size: 2rem;
85	cursor: pointer;
86}
87
88.overlay{
89	position: fixed;
90	top: 0;
91	bottom: 0;
92	right: 0;
93	left: 0;
94	background: rgba(255,255,255,0.95);
95	margin-top:20px;
96	opacity: 0;
97	pointer-events: none;
98}
99.overlay #close
100{
101	font-size: 2rem;
102	display: block;
103	text-align: right;
104	cursor: pointer;
105}
106.overlay ul{
107	text-align: center;
108	margin-top: 50px;
109}
110.overlay li{
111	margin-top: 30px;
112}
113
114.overlay.show{
115	opacity: 1;
116	pointer-events: auto;
117}
118.sp-menu #open.hide{
119	display: none;
120}
121

javascript
1'use strict';
2
3{
4	const open = document.getElementById('open');
5	const overlay = document.querySelector('.overlay');
6	const close = document.getElementById('close');
7	
8	
9	open.addEventListener('click', () => {
10	overlay.classList.add('show');
11	open.classList.add('hide');
12
13		
14	});
15	
16	close.addEventListener('click', () => {
17	overlay.classList.remove('show');
18	open.classList.remove('hide');
19
20		
21	});
22}

slemntqe

2022/08/10 04:39

「効か亡くなって」「半バーガーメニュー」誤字が目立ちますので訂正して下さい。

slemntqe

2022/08/10 04:40

「色々試しましたが」具体的に何を試しましたか？明示して下さい。

slemntqe

2022/08/10 04:42

main.jsが質問本文に含まれてないのは何故でしょうか。HTMLで参照されている以上質問本文に加えるべきです。main.jsが今回の問題に関係があるかどうかを判断するのは回答者です。main.jsが提示されない限りmain.jsが問題の原因である可能性が消えません。

negiremi

2022/08/10 04:49

お返事ありがとうございます。失礼いたしました。内容修正させて頂きました。

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

回答1件

ベストアンサー

　中央に寄せることができれば解決であれば、以下のCSSを追加してみるとどうでしょうか？

css
1header {
2	display: flex;
3	justify-content: space-between;
4	position: fixed;
5	z-index: 999;
6	padding: 0;
7	margin: 0;
8	background: rgba(200, 255, 255, 1);
9	inset: auto 0; /* ←これ */
10}

　メインコンテンツにヘッダーがかぶっているのも気になるのですが、そこは大丈夫ですか？

　なお、固定配置をするとマージンが効かなくなる理由は、固定配置や絶対配置の時にleft rightがautoだと、margin-left: auto margin-right: autoはmargin-left: 0 margin-right: 0として扱われる、という仕様によるものです。

（↓こちらの表の「✔ ✘ ✔ any」の欄）
https://www.w3.org/TR/css-position-3/#abspos-auto

参考：
inset - CSS: カスケーディングスタイルシート | MDN

投稿2022/08/10 05:11

編集2022/08/10 05:37