ハンバーガーメニューが隠れてしまう（z-indexを試しても直らない場合）

前提・実現したいこと

HTML,CSS, Javascriptでハンバーガーメニューを作りました。
ボタンをクリックすると、ナビゲーションが出てくるのですが、なぜかトップ画面の下に隠れてしまいます。
どうすればよいでしょうか？

該当のソースコード

HTML
1header>
2            <h1> Hi, there!</h1>
3                <div class='nav' id='nav'>
4                    <ul>
5                        <li><a href = "https://www.linkedin.com/" title="You can expand your network through LinkedIn and check other's background." class='list'>LinkedIn</a></li>
6                        <li><a href="contacts/index.html" class='list'>Contacts</a></li>
7                        <li><a href = "games/memorygames.html" class='list'>Play Memory Card Game</a></li>
8                        <li><a href = "games/whackamolegames.html" class='list'> Play Whack-a-mole</a></li> 
9                        <li><button class='list'>Change user</button></li>
10                    </ul>
11                </div>
12                <div class='target'>
13                    <div id="hamburger">
14                    　　　　<span class="inner_line" id="line1"></span>
15                    　　　　<span class="inner_line" id="line2"></span>
16                    　　　　<span class="inner_line" id="line3"></span>
17                    </div>
18                </div>
19        </header>
20        <section class="main-section">
21            <div class="top">
22                <img src="images/tokyo.jpg" alt="Tokyo">
23                <h2>Welcome to mywebsite</h2>
24            </div>

css
1html {
2    font-size: 10px;
3    font-family: 'Source Sans Pro', sans-serif;
4   }
5   
6   html, body {
7     margin: 0;
8     padding: 0;
9     width: 100%;
10     height: 100%;
11   }
12   
13   /* first section */
14   header {
15     background-color: #333333;
16     align-items: center;
17     height: 100px;
18     width: 100%;
19     z-index:10; 
20     position: fixed;
21     overflow: hidden;
22     clear: both; 
23   }
24   
25   header h1 {
26     margin: 10px 0px 10px 30px;
27     padding: 20px 0;
28     float: left;
29     font-size: 300%;
30     color: #FD3E81;
31     text-align: left;
32     letter-spacing: 1px;
33   }
34   
35
36   /*Hamburger line closed*/
37
38   #hamburger {
39    display: block;
40    position: absolute;
41    top: 27px;
42    margin-left: 270px;
43    width: 50px;
44    height: 44px;
45    cursor: pointer;
46    transition: 1s;
47  }
48
49  .inner_line {
50    display: block;
51    position: absolute;
52    left: 0;
53    width: 50px;
54    height: 3px;
55    background-color: #FFF;
56    transition: 1s;
57    border-radius: 4px;
58  }
59
60  #line1 {
61    top: 0px;
62  }
63  #line2 {
64    top: 20px;
65  }
66  #line3 {
67    bottom: 0px;
68  }
69  /*Hamburger line closed*/
70
71  /*Hamburger line opened*/
72  .in{
73    transform: translateX(100%);
74  }
75  .line_1,.line_2,.line_3{
76    background: #fff;
77  }
78  .line_1 {
79    transform: translateY(20px) rotate(-45deg);
80    top: 0;
81  }
82  .line_2 {
83    opacity: 0;
84  }
85  .line_3 {
86    transform: translateY(-20px) rotate(45deg);
87    bottom: 0;
88  }
89  
90  /*Hamburger line opened*/
91
92  /*Hamburger movement end*/
93  
94   .nav {
95      position: absolute;
96      top: 0;
97      left: -100%;
98      width: 100%;
99      height: 100vh;
100      background: #333333; /*０.7秒かけてナビメニューがスライドする*/
101      transition: .7s;
102    }
103
104   
105   .nav ul {
106     margin: 50px;
107     padding: 0;
108     list-style: none;
109     overflow-y: scroll;
110   }
111   
112   .nav li {
113    text-align: center;
114    padding: 5px 14px;
115   }
116   
117   a:link {
118     color: white;
119   
120   }
121   
122   a:visited {
123     color: #fff;
124   }
125   
126   a:hover {
127     color: #FD3E81;
128   }
129   
130   button {
131     color: #fff;
132     background-color: #eb6100;
133     font-size: 100%;
134     font-weight: bold;
135     text-align: left;
136     margin-top: 5px;
137     border-radius: 5px;
138     padding: 2px 2px;
139   }
140   
141   button:hover {
142     color:#fff;
143     background-color: #f56500;
144   }
145   
146
147
148   /* Next section */
149   .main-section {
150     margin: 0;
151     padding: 0;
152   }
153   
154   .top {
155     position: relative;
156   }
157   
158   .top img{
159     width: 100%;
160     height: 500px;
161     object-fit: cover;
162     object-position:50% 50%;
163   }
164   
165   .top h2 {
166     position: absolute;
167     top: 50%;
168     left: 50%;
169     transform: translate(-50%, -50%);
170     margin: 0;
171     padding: 0;
172     font-size: 400%;
173     color: white;
174   }
175   
176

Javascript
1function hamburger() {
2    document.getElementById('line1').classList.toggle('line_1');
3    document.getElementById('line2').classList.toggle('line_2');
4    document.getElementById('line3').classList.toggle('line_3');
5    document.getElementById('nav').classList.toggle('in');
6  }
7  document.getElementById('hamburger').addEventListener('click' , function () {
8    hamburger();
9  } );