画面を広げるとハンバーガーメニューが右にはみ出てしまう

前提・実現したいこと

画面を広げてもハンバーガーメニューがはみ出さないようにしたい。

該当のソースコード

html
1<header class="header">
2    <div class="header_logo">
3      <a href="">
4        <img src="img/logo.jpg" alt="Engress">
5      </a>
6    </div>
7    <nav class="header_nav">
8      <div class="ham"><a href=""><span class="ham-line ham-line1"></span><span class="ham-line ham-line2"></span><span
9            class="ham-line ham-line3"></span></a></div>
10      <ul class="header_list">
11        <li class="header_list-item"><a href="" class="p">ホーム</a></li>
12        <li class="header_list-item"><a href="" class="p">お知らせ</a></li>
13        <li class="header_list-item"><a href="" class="p">ブログ</a></li>
14        <li class="header_list-item"><a href="" class="p">コース・料金</a></li>
15      </ul>
16      <div class="header_right">
17        <div class="tel-box">
18          <small class="tel-hour">平日08:00〜20:00</small>
19          <p class="tel-number"><a href="tel:0123-456-7890" class="p">0123-456-7890</a></p>
20        </div>
21        <a href="">
22          <div class="square-request-btn">
23            <span class="square-request-btn-text">
24              資料請求
25            </span>
26          </div>
27        </a>
28        <a href="">
29          <div class="contact-btn header-btn">
30            <span class="contact-btn-text">
31              お問い合わせ
32            </span>
33          </div>
34        </a>
35      </div>
36    </nav>
37  </header>

scss
1//style.scss
2
3$bpc: 1600px; //PC大画面
4$spc: 1280px; // PC通常
5$ipad: 768px; // iPad
6$sp: 375px; // スマホ
7
8@mixin sp {
9  @media screen and (min-width: $sp) {
10    @content;
11  }
12}
13
14@mixin ipad {
15  @media screen and (min-width: $ipad) {
16    @content;
17  }
18}
19
20@mixin spc {
21  @media screen and (min-width: $spc) {
22    @content;
23  }
24}
25
26@mixin bpc {
27  @media screen and (min-width: $bpc) {
28    @content;
29  }
30}

scss
1//hero.scss
2
3@charset "utf-8";
4
5@import 'style.scss';
6
7.header {
8  display: flex;
9  align-items: center;
10  height: 5rem;
11  max-width: 100%;
12
13  @include ipad {
14    height: 8rem;
15  }
16}
17
18.header_logo {
19  margin: auto 0;
20  margin-left: .5rem;
21
22  @include ipad {
23    margin-left: 1.5rem;
24  }
25
26  a {
27    img {
28      width: 10rem;
29      height: auto;
30
31      @include spc {
32        width: 13.6rem;
33        height: 2.7rem;
34      }
35    }
36  }
37}
38
39.header_nav {
40  margin-left: auto;
41  display: flex;
42  align-items: center;
43
44  @include spc {
45
46    width: 100%;
47    align-items: center;
48    margin-left: .2rem;
49  }
50}
51
52.ham {
53  width: 4em;
54  height: 4em;
55  cursor: pointer;
56  position: relative;
57
58  @include spc {
59    display: none;
60  }
61}
62
63.ham-line {
64  position: absolute;
65  left: 1em;
66  width: 2em;
67  height: 0.2em;
68  background-color: $navyBlue;
69  transition: all 0.3s;
70}
71
72.ham-line1 {
73  top: 1em;
74}
75
76.ham-line1.open {
77  transform: rotate(45deg);
78  top: 2em;
79}
80
81.ham-line2 {
82  top: 1.8em;
83}
84
85.ham-line2.open {
86  width: 0;
87}
88
89.ham-line3 {
90  top: 2.6em;
91}
92
93.ham-line3.open {
94  transform: rotate(-45deg);
95  top: 2em;
96}
97
98
99.header_list {
100
101  @include spc {
102    display: flex;
103  }
104}
105
106.header_list-item {
107  display: none;
108
109  @include spc {
110    display: block;
111    margin-left: 2.8rem;
112    font-weight: bold;
113    line-height: 1.8;
114  }
115
116  a {
117    color: $navyBlue;
118  }
119}
120
121.header_right {
122  display: none;
123  margin-left: auto;
124
125  @include spc {
126    display: flex;
127  }
128}
129
130.tel-box {
131
132  @include spc {
133    margin-right: 1.4rem;
134  }
135}
136
137.tel-hour {
138  color: $navyBlue;
139}
140
141.tel-number {
142  a {
143    color: $navyBlue;
144
145    @include spc {
146      font-weight: bold;
147    }
148  }
149}
150
151.square-request-btn {
152  font-size: 1.4rem;
153  line-height: 1.7;
154  font-weight: bold;
155  height: 5rem;
156  margin-right: 1rem;
157  width: 14rem;
158  border-radius: .5rem;
159  background-color: $yellowOrange;
160  width: 10rem;
161  display: none;
162  justify-content: center;
163  align-items: center;
164  color: $white;
165
166  @include spc {
167    display: flex;
168  }
169}
170
171.contact-btn {
172  font-size: 1.4rem;
173  font-weight: bold;
174  line-height: 1.7;
175  height: 5rem;
176  width: 13.7rem;
177  border-radius: .5rem;
178  margin-right: 1rem;
179  background-color: $navyBlue;
180  display: none;
181  justify-content: center;
182  align-items: center;
183  color: $white;
184
185  @include spc {
186    display: flex;
187  }
188}
189