position: fixedの要素を左右中央ぞろえにしたいです。

header__wrapperの要素にposition: fixedを設定しました。
画面が1000px以上になったらそれ以上広がらないようにするため、
max-widthで1000pxと設定したところ、そこから左寄せ表示になってしまうので、左右中央ぞろえにしたいです。

「margin: 0 auto」を試したのですが、変化がありません。
申し訳ありませんが、ご教授ねがいます。

html
1コード
2<body>
3    <div class="header">
4      <div class="header__wrapper js-open">
5        <div class="header_logo">
6          <img class="header__logo-body" src="image/logo.svg" />
7        </div>
8        <div class="header__nav-btn">
9          <span class="header__nav-line"></span
10          ><span class="header__nav-line"></span
11          ><span class="header__nav-line"></span>
12        </div>
13        <ul class="nav">
14          <li class="nav__item"><a class="nav__link" href="">PICK UP</a></li>
15          <li class="nav__item"><a class="nav__link" href="">FEATURE</a></li>
16          <li class="nav__item"><a class="nav__link" href="">CONTACT</a></li>
17        </ul>
18        <div class="cover-darken"></div>
19      </div>
20    </div>
21    <script src="main.js"></script>
22  </body>

css
1html {
2  font-size: 62.5%;
3}
4* {
5  padding: 0;
6  margin: 0;
7  box-sizing: border-box;
8}
9ul {
10  list-style: none;
11}
12a {
13  color: black;
14  text-decoration: none;
15}
16.header {
17  &__wrapper {
18    position: fixed;
19    display: flex;
20    width: 100%;
21    max-width: 1000px;
22    padding: 20px;
23    justify-content: space-between;
24    align-items: center;
25    margin: 0 auto;
26  }
27  &__nav-btn {
28    position: absolute;
29    right: 20px;
30    z-index: 3;
31    cursor: pointer;
32    overflow: hidden;
33  }
34
35  &__nav-line {
36    display: block;
37    width: 30px;
38    height: 2px;
39    background-color: black;
40    opacity: 1;
41    transition: all 0.5s;
42    &:not(:last-child) {
43      margin-bottom: 10px;
44    }
45  }
46}
47.nav {
48  position: fixed;
49  top: 0;
50  left: 0;
51  bottom: 0;
52  z-index: 100;
53  display: inline-block;
54  width: 250px;
55  visibility: hidden;
56  opacity: 0;
57  font-size: 1.5rem;
58  background-color: black;
59  text-align: left;
60  padding: 60px 25px 0;
61  transform: translateX(-300px);
62  transition: all 0.5s;
63
64  &__item {
65    border-top: 1px solid white;
66    padding: 25px 0;
67    &:last-child {
68      border-bottom: 1px solid white;
69    }
70  }
71  &__link {
72    color: white;
73  }
74}
75.cover-darken {
76  position: fixed;
77  top: 0;
78  bottom: 0;
79  left: 0;
80  right: 0;
81  z-index: 1;
82  display: none;
83  cursor: pointer;
84  background-color: #333333;
85}
86.is-opened {
87  & .cover-darken {
88    display: block;
89    opacity: 0.9;
90  }
91  & .header__nav-line {
92    &:nth-child(1) {
93      transform: translateY(12px) rotate(135deg);
94      background-color: white;
95    }
96    &:nth-child(2) {
97      transform: translateX(-30px);
98      background-color: white;
99      opacity: 0;
100    }
101    &:nth-child(3) {
102      transform: translateY(-12px) rotate(-135deg);
103      background-color: white;
104    }
105  }
106  & .nav {
107    transform: none;
108    visibility: visible;
109    opacity: 1;
110  }
111}

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

回答1件

ベストアンサー

fixedでは margin: 0 auto; はききませんね。

下記でどうでしょう。

scss
1.header {  
2  &__wrapper {
3    position: fixed;
4    display: flex;
5    width: 100%;
6    max-width: 1000px;
7    padding: 20px;
8    justify-content: space-between;
9    align-items: center;
10//    margin: 0 auto;　削除
11    left: 50%;  //追加
12    transform: translateX(-50%) //追加
13  }
14