ハンバーガーメニューが半分に切れてしまったり四角い囲みが表示されたりする

前提

参考書をもとにハンバーガーメニューを作りましたが、画像のように半分に切れてしまったり四角い囲みが表示されたりします。四角い囲みを消して、ハンバーガーメニュー全体を表示させたいです。

イメージ説明

該当のソースコード

html5
1<body>
2    <header class="header">
3        <h1 class="header-logo"><img src="./img/logo.svg" alt="東京サファリパーク" width="280"></h1>
4        <button type="button" id="header-btn" class="header-btn" title="メニュー開閉"><span></span></button>
5        <nav class="header-gnav">
6          <ul class="header-gnav-list">
7            <li><a href="#"><span class="material-icons header-gnav-animals">pets</span>動物紹介</a></li>
8            <li><a href="#"><span class="material-icons header-gnav-guide">explore</span>パークガイド</a></li>
9            <li><a href="#"><span class="material-icons header-gnav-ticket">confirmation_number</span>料金・チケット</a></li>
10            <li><a href="#"><span class="material-icons header-gnav-access">commute</span>交通アクセス</a></li>
11          </ul>
12        </nav>
13      </header>
14      <!-- /.header -->
15</body>

css3
1.header {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5  margin: 0 auto;
6  padding: 12px 16px;
7  position: fixed;
8  left: 0;
9  top: 0;
10  z-index: 1000;
11  max-width: 1200px;
12  width: 100%;
13  background-color: #fff;
14}
15
16@media screen and (min-width: 768px) {
17  .header {
18    position: static;
19    flex-direction: column;
20  }
21}
22
23@media screen and (min-width: 992px) {
24  .header {
25    flex-direction: row;
26  }
27}
28
29.header-logo {
30  line-height: 1;
31}
32
33@media screen and (max-width: 575px) {
34  .header-logo {
35    width: 250px;
36  }
37}
38
39.header-btn {
40  width: 32px;
41  height: 20px;
42  padding-right: 5px;
43  background: none;
44  display: block;
45  z-index: 500;
46}
47
48.header-btn span {
49  position: relative;
50  display: block;
51  height: 2px;
52  background: #333;
53  transition: all .3s;
54}
55
56.header-btn span::before, .header-btn span::after {
57  position: absolute;
58  left: 0;
59  content: "";
60  display: block;
61  width: 100%;
62  height: 2px;
63  background: #333;
64  transition: all .3s;
65}
66
67.header-btn span::before {
68  top: -10px;
69}
70
71.header-btn span::after {
72  bottom: -10px;
73}
74
75@media screen and (min-width: 768px) {
76  .header-btn {
77    display: none;
78  }
79}
80
81.header-gnav {
82  margin-top: 62px;
83  width: 100%;
84  height: 100vh;
85  position: absolute;
86  top: 0;
87  right: -100%;
88  transition: all .5s;
89  background-color: #fff;
90}
91
92@media screen and (min-width: 768px) {
93  .header-gnav {
94    margin-top: 0;
95    width: auto;
96    height: auto;
97    position: static;
98  }
99}
100
101.header-gnav-list {
102  border-top: 1px solid #efe1c5;
103  list-style: none;
104  
105}
106
107.header-gnav-list a {
108  display: flex;
109  font-weight: bold;
110  align-items: center;
111  padding: 8px 24px;
112  font-size: 18px;
113  border-bottom: 1px solid #efe1c5;
114  text-decoration: none;
115}
116
117.header-gnav-list a span {
118  font-size: 22px;
119  color: #459209;
120  margin-right: 8px;
121}
122
123.header-gnav-list a span.header-gnav-access {
124  font-size: 24px;
125}
126
127@media screen and (min-width: 768px) {
128  .header-gnav-list {
129    display: flex;
130    border: none;
131  }
132  .header-gnav-list a {
133    border: none;
134    margin-left: 16px;
135    padding: 5px;
136  }
137}
138
139.is-openMenu .header-btn span {
140  background: transparent;
141}
142
143.is-openMenu .header-btn span::before {
144  top: 0;
145  transform: rotate(45deg);
146}
147
148.is-openMenu .header-btn span::after {
149  top: 0;
150  transform: rotate(-45deg);
151}
152
153.is-openMenu .header-gnav {
154  right: 0;
155}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

退会済みユーザー

2022/08/18 05:43

四角い枠というのは、buttonにデフォルトでついているborderなので、buttonに対してborder:none;を当ててあげることで消すことができます

回答1件

ベストアンサー

まず、四角い枠はすでに指摘があるように、buttonに対してborder:none;を設定すればいいでしょう。

メニュー全体が画面からはみ出す原因は、.headerの幅をwidth: 100%;としつつ、padding: 12px 16px;と余白を設定しているので、.headerの幅が100% + 16px*2 となっているため、余白分はみ出しています。
左右余白を padding: 12px 0;というように0にすればはみ出さなくなります。
が、余白は欲しいですよね。その場合は、.headerにbox-sizing: border-box;を追加しましょう。
そうすると、余白付きではみ出さないようになります。
box-sizing: border-box;は要素全体のサイズを余白も含めて計算しなさいという意味になります。