ハンバーガーメニューを閉じることができません。

Question

ハンバーガーメニューを作成中ですが、表示したメニュー一覧を閉じることができません。
また、縦並びのメニュー一覧を、より広く等間隔に表示できないでいます。
ご指導いただければ幸いです。

<div id="nav-wrapper" class="nav-wrapper">
  <div class="hamburger" id="js-hamburger">
    <span class="hamburger__line hamburger__line--1"></span>
    <span class="hamburger__line hamburger__line--2"></span>
    <span class="hamburger__line hamburger__line--3"></span>
    <nav class="sp-nav">
      <ul>
         <li><a href="about.html">About</a></li>
        <li><a href="Staff.html">Staff</a></li>
        <li><a href="Menu.html">Menu</a></li>
        <li><a href="Blog.html">Blog</a></li>
        <li><a href="Access.html">Access</a></li>
     </ul>
    </nav>
    <div class="black-bg" id="js-black-bg"></div>
  </div>

@media screen and (max-width: 600px) {

    
    /* 
    hamburger(ハンバーガーアイコン)
    =================================== */
    .hamburger {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 50px;
        height: 40px;
        cursor: pointer;
        
        z-index: 300;
    }
    
    .hamburger__line {
        position: absolute;
        width: 50px;
        height: 3px;
        right: 0;
        background-color: #000;
        /* background-color: red; */
        transition: all 0.5s;
    }
    
    .hamburger__line--1 {
        top: 1px;
    }
    
    .hamburger__line--2 {
        top: 18px;
    }
    
    .hamburger__line--3 {
        top: 36px;
    }
    
    /*ハンバーガーがクリックされたら*/
    .open .hamburger__line--1 {
        transform: rotate(-45deg);
        top: 11px;
        }
    
    .open .hamburger__line--2 {
        opacity: 0;
       }
    
    .open .hamburger__line--3 {
        transform: rotate(45deg);
        top: 11px;
     }
    
    /* 
    sp-sp-nav(ナビ)
    =================================== */
    .sp-nav {
        position: fixed;
        right: -100%; /*ハンバーガーがクリックされる前はWindow右側に隠す*/
        top: 0;
        width: 70%; /* 出てくるスライドメニューの幅 */
        height: 100vh;
        background-color: #fff;
        /* background-color:green; */
        transition: all 0.5s;
        z-index: 200;
        overflow-y: auto; /* メニューが多くなったらスクロールできるように */
    }
    
    /*ハンバーガーがクリックされたら右からスライド*/
    .open .sp-nav {
        right: 0;
        /* background-color: hotpink; */
        height: 580px;
    }
    
    
    /* 
    black-bg(ハンバーガーメニュー解除用bg)
    =================================== */
    .black-bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 5;
        /* background-color: #000; */
        /* background-color: blue; */
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s;
        cursor: pointer;
        z-index: 100;
    }
    
    /*ハンバーガーメニューが開いたら表示*/
    .open .black-bg {
        opacity: 0.3;
        visibility: visible;
        /* background-color: lawngreen; */
    }
    
}
    
    

window.onload = function () {
    var nav = document.getElementById('nav-wrapper');
    var hamburger = document.getElementById('js-hamburger');
    var blackBg = document.getElementById('js-black-bg');

    hamburger.addEventListener('click', function () {
        nav.classList.toggle('open');
    });
    blackBg.addEventListener('click', function () {
        nav.classList.remove('open');
    });
};

Answer 1

line-heightをpxで設定していたのが誤りでした。
ここをline-height:3;に改めることで適正に表示されました。
同時にメニュー一覧を閉じることができました。
数値の誤りが原因であったようです。

@media screen and (max-width: 600px) {

.sp-nav li a {

    margin-right:50px;        
    /* color:black; */
    color:red;
    list-style: none;
    font-size: 30px;
    font-family: 'Montserrat';
    font-weight: 100;
    /* margin-right: 150px; */
    /* padding-bottom: 30px; */
    /* margin-bottom: 30px; */

  **  line-height: 3;**
    z-index 4;
}