header-item非表示を解消したい

前提・実現したいこと

表題を解消したい。

発生している問題・エラーメッセージ

header-itemが表示されない（1180px以上）

試したこと

jsをチェック→誤字がないか、確認したが、なし。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Engress</title>
8    <meta name="description" content="日本人へのTOEFL指導歴豊かな講師陣のコーチング型TOEFLスクール">
9    <link rel="stylesheet" href="/Top/css/destyle.css">
10    <link rel="stylesheet" href="/Top/css/style.css">
11</head>
12<body>
13        <header class="header">
14            <div class="header-inner">
15                <div class="header-left"> 
16                    <h1><a href="#"><img src="./img/logo (2).png" alt="Logo"></a></h1>
17                    <nav class="nav drawer-nav">
18                        <ul class="header-list">
19                            <li class="header-item"><a href="#">ホーム</a></li><!-- /.header-item -->
20                            <li class="header-item"><a href="#">お知らせ</a></li><!-- /.header-item -->
21                            <li class="header-item"><a href="#">ブログ</a></li><!-- /.header-item -->
22                            <li class="header-item"><a href="../Cost/cost.html">コース・料金</a></li><!-- /.header-item -->
23                        </ul><!-- /.header-list -->
24                    </nav><!-- /.nav -->
25                </div><!-- /.header-left -->
26
27                <div class="header-right">
28                    <div class="tel-column">
29                        <p class="date">平日08:00〜20:00</p><!-- /.date -->
30                        <div class="tel-row">
31                            <img src="../Top/img/tel 29.svg" alt="tel">
32                            <p>0123-456-7890</p>
33                        </div><!-- /.tel-row -->
34                    </div><!-- /.tel-column -->
35                        <div class="link-right">
36                        <div class="header-link"><a href="#">資料請求</a></div><!-- /.header-link -->
37                        <div class="header-link2"><a href="#">お問い合わせ</a></div><!-- /.header-link2 -->
38                    </div><!-- /.link-right -->
39                    <button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
40                </div><!-- /.header-right -->
41            </div><!-- /.header-inner -->
42            <div class="overlay"></div><!-- /.overlay -->
43        </header><!-- /.header -->
44</body>
45</html>

CSS
1.header-left {
2  display: -webkit-box;
3  display: -webkit-flex;
4  display: -ms-flexbox;
5  display: flex;
6  -webkit-box-pack: justify;
7  -webkit-justify-content: space-between;
8      -ms-flex-pack: justify;
9          justify-content: space-between;
10  -webkit-box-align: center;
11  -webkit-align-items: center;
12      -ms-flex-align: center;
13          align-items: center;
14  margin: 0px auto 0px 15px;
15  /* このクラスを、jQueryで付与・削除する */
16}
17
18.header-left h1 {
19  width: 136px;
20  height: 27px;
21}
22
23.header-left .nav {
24  margin-right: auto;
25}
26
27.header-left .nav .header-list {
28  display: -webkit-box;
29  display: -webkit-flex;
30  display: -ms-flexbox;
31  display: flex;
32  -webkit-box-pack: justify;
33  -webkit-justify-content: space-between;
34      -ms-flex-pack: justify;
35          justify-content: space-between;
36  -webkit-box-align: center;
37  -webkit-align-items: center;
38      -ms-flex-align: center;
39          align-items: center;
40}
41
42.header-left .nav .header-list_active {
43  background: #ccc;
44  margin: 0 auto;
45  padding: 0;
46  width: 100%;
47}
48
49.header-left .nav .header-list .header-item {
50  margin: 32px 28px;
51}
52
53.header-left .nav .header-list .header-item :last-child {
54  margin-right: 0px;
55}
56
57.header-left .nav .header-list .header-item > a {
58  color: #1B224C;
59  font-weight: bold;
60}
61
62.header-left .drawer-nav {
63  position: fixed;
64  z-index: 2;
65  top: 0;
66  left: 0;
67  color: #000;
68  background: #fff;
69  text-align: center;
70  -webkit-transform: translateY(-100%);
71          transform: translateY(-100%);
72  -webkit-transition: all 0.9s;
73  transition: all 0.9s;
74  width: 100%;
75}
76
77.header-left .drawer-nav_active {
78  -webkit-transform: translateY(0%);
79          transform: translateY(0%);
80}
81
82.header-right {
83  display: -webkit-box;
84  display: -webkit-flex;
85  display: -ms-flexbox;
86  display: flex;
87  -webkit-box-pack: justify;
88  -webkit-justify-content: space-between;
89      -ms-flex-pack: justify;
90          justify-content: space-between;
91  -webkit-box-align: center;
92  -webkit-align-items: center;
93      -ms-flex-align: center;
94          align-items: center;
95  margin-left: auto;
96}
97
98.header-right .tel-column {
99  display: -webkit-box;
100  display: -webkit-flex;
101  display: -ms-flexbox;
102  display: flex;
103  -webkit-box-orient: vertical;
104  -webkit-box-direction: normal;
105  -webkit-flex-direction: column;
106      -ms-flex-direction: column;
107          flex-direction: column;
108  padding: 10px 23px 15px 23px;
109}
110
111@media screen and (min-width: 600px) and (max-width: 1179px) {
112  .header-right .tel-column {
113    display: none;
114  }
115}
116
117.header-right .tel-column .date {
118  display: block;
119  padding: 27px 0px 10px 0px;
120}
121
122.header-right .tel-column .tel-row {
123  display: -webkit-box;
124  display: -webkit-flex;
125  display: -ms-flexbox;
126  display: flex;
127  -webkit-box-orient: horizontal;
128  -webkit-box-direction: normal;
129  -webkit-flex-direction: row;
130      -ms-flex-direction: row;
131          flex-direction: row;
132  padding-bottom: 15px;
133  margin-left: auto;
134}
135
136.header-right .tel-column .tel-row img {
137  width: 20%;
138  padding-right: 5px;
139}
140
141.header-right .tel-column .tel-row p {
142  font-size: 1.6rem;
143  font-weight: bold;
144  white-space: nowrap;
145}
146
147.header-right .link-right {
148  display: -webkit-box;
149  display: -webkit-flex;
150  display: -ms-flexbox;
151  display: flex;
152  -webkit-box-orient: horizontal;
153  -webkit-box-direction: normal;
154  -webkit-flex-direction: row;
155      -ms-flex-direction: row;
156          flex-direction: row;
157  margin-left: auto;
158}
159
160@media screen and (min-width: 600px) and (max-width: 1179px) {
161  .header-right .link-right {
162    opacity: 0;
163  }
164}
165
166@media screen and (max-width: 700px) {
167  .header-right .link-right {
168    opacity: 0;
169  }
170}
171
172.header-right .link-right .header-link {
173  background-color: #F5A623;
174  width: 145px;
175  height: 50px;
176}
177
178.header-right .link-right .header-link > a {
179  display: block;
180  color: #fff;
181  font-size: 1.4rem;
182  text-align: center;
183  padding: 18px 43px;
184  -webkit-transition: .4s;
185  transition: .4s;
186  line-height: 14px;
187}
188
189.header-right .link-right .header-link :hover {
190  opacity: 0.5;
191}
192
193.header-right .link-right .header-link2 {
194  background-color: #1B224C;
195  width: 145px;
196  height: 50px;
197  margin: 0px 10px;
198  line-height: 14px;
199}
200
201.header-right .link-right .header-link2 > a {
202  display: block;
203  color: #fff;
204  font-size: 1.4rem;
205  text-align: center;
206  padding: 18px 4px;
207  -webkit-transition: .4s;
208  transition: .4s;
209  white-space: nowrap;
210}
211
212.header-right .link-right .header-link2 :hover {
213  opacity: 0.5;
214}
215
216/*　ハンバーガーボタン　*/
217.humburger {
218  display: none;
219  /* ナビ開いてる時のボタン */
220}
221
222@media screen and (min-width: 600px) and (max-width: 1179px) {
223  .humburger {
224    display: block;
225    position: fixed;
226    z-index: 3;
227    right: 13px;
228    top: 20px;
229    width: 42px;
230    height: 42px;
231    cursor: pointer;
232    text-align: center;
233  }
234  .humburger span {
235    display: block;
236    position: absolute;
237    width: 30px;
238    height: 2px;
239    left: 6px;
240    background: #555;
241    -webkit-transition: 0.3s ease-in-out;
242    transition: 0.3s ease-in-out;
243  }
244  .humburger span:nth-child(1) {
245    top: 10px;
246  }
247  .humburger span:nth-child(2) {
248    top: 20px;
249  }
250  .humburger span:nth-child(3) {
251    top: 30px;
252  }
253  .humburger._active {
254    -webkit-transition: all 0.3s ease-in-out;
255    transition: all 0.3s ease-in-out;
256    -webkit-transition-delay: 0.6s;
257    transition-delay: 0.6s;
258    -webkit-transform: rotate(45deg);
259    transform: rotate(45deg);
260  }
261  .humburger._active span:nth-child(2) {
262    width: 0px;
263  }
264  .humburger._active span:nth-child(1), .humburger._active span:nth-child(3) {
265    -webkit-transition-delay: 0.3s;
266    transition-delay: 0.3s;
267  }
268  .humburger._active span:nth-child(1) {
269    -webkit-transform: translateY(4px);
270    transform: translateY(4px);
271  }
272  .humburger._active span:nth-child(3) {
273    -webkit-transform: translateY(-16px) rotate(90deg);
274    transform: translateY(-16px) rotate(90deg);
275  }
276}
277
278.humburger .drawer-nav {
279  position: fixed;
280  z-index: 2;
281  top: 0;
282  left: 0;
283  color: #000;
284  background: #fff;
285  text-align: center;
286  -webkit-transform: translateY(-100%);
287          transform: translateY(-100%);
288  -webkit-transition: all 0.9s;
289  transition: all 0.9s;
290  width: 100%;
291}
292
293.humburger .drawer-nav .header-list {
294  background: #ccc;
295  margin: 0 auto;
296  padding: 0;
297  width: 100%;
298}
299
300.humburger .drawer-nav .header-list .header-item {
301  list-style-type: none;
302  padding: 0;
303  width: 100%;
304  border-bottom: 1px solid #fff;
305}
306
307.humburger .drawer-nav .header-list .header-item:last-child {
308  padding-bottom: 0;
309  border-bottom: none;
310}
311
312.humburger .drawer-nav .header-list .header-item:hover {
313  background: #ddd;
314}
315
316.humburger .drawer-nav .header-list .header-item a {
317  display: block;
318  color: #000;
319  padding: 1em 0;
320  text-decoration: none;
321}
322
323.humburger .drawer-nav._active {
324  -webkit-transform: translateY(0%);
325          transform: translateY(0%);
326}

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

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

回答1件

ベストアンサー

transform: translateY(-100%); で画面の外に移動させているので、
これを打ち消せば表示されるようにはなります。
下記をCSSの最後に追加してみてください。

css
1@media screen and (min-width: 1180px) {
2  .header-left .drawer-nav {
3    position: relative;
4    -webkit-transform: translateY(0);
5    transform: translateY(0);
6  }
7}