display:none;　解除できない

前提

WordPressでサイトを作成しています。
ハンバーガーメニューでクリックする前の状態でメニューが画面からはみ出てしまっていました。
そこでoverflow: hidden;を試しましたが、はみ出た部分の非表示ができませんでした。

（１）試したこと

html {
    overflow: auto;
  }
  body {
    overflow: hidden;
  }

（２）試したこと
body直下に<div class="hideen">を作成し、以下Cssを記述。

.hideen {
    position: relative;
    overflow-x: hidden;
  }

（３）試したこと
JavaScriptで３本線をクリックした際に#nav に付与されるclass=”in”に、メニューにつけていたCssを持たせてみました。
（クリックする前は、PC画面の#nav　に対して、display:none;　としているので画面には表示されません。）

  .in{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 16rem;
    height: 600px;
    background: #000;
    opacity: 0.7;
    transition: 0.5s;
    z-index: 20;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    transform-origin: bottom left;
  }

しかしながら、#nav　の　display:none;　を　.in の display:flex;　で解除できず
メニューを表示することができませんでした。

実現したいこと

#nav　の　display:none;　を解除し、ハンバーガーメニューを表示させたいです。

該当のソースコード

■header.php

<?php header("X-UA-Compatible: IE=edge,chrome=1"); ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php bloginfo('name'); ?></title>
  <!-- Google font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone" rel="stylesheet">
  <!-- FontAwesome -->
  <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="<?php echo get_theme_file_uri('/style.css'); ?>">
  <link rel="stylesheet" href="<?php echo get_theme_file_uri('/responsive.css'); ?>">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="<?php echo get_theme_file_uri('js/main.js'); ?>"></script>
  <script type="text/javascript" src="<?php echo get_theme_file_uri('/js/jquery.inview.min.js'); ?>"></script>
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?> ontouchstart="">
  <header id="content" class="header case">
    <nav class="Nav js-header">
      <ul class="menu">
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a></li>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/about/' ) ); ?>">About</a></li>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/case/' ) ); ?>">Case</a></li>
        <li>
        <a class="js-header">Gaps</a>
          <ul class="dropdown js-header">
            <li><a class="js-header" href="<?php echo esc_url( home_url( '/gaptime/' ) ); ?>">Gap Time</a></li>
            <li><a class="js-header" href="<?php echo esc_url( home_url( '/gapday/' ) ); ?>">Gap Day</a></li>
            <li><a class="js-header" href="<?php echo esc_url( home_url( '/gapweek/' ) ); ?>">Gap Week</a></li>
            <li><a class="js-header" href="<?php echo esc_url( home_url( '/gapyear/' ) ); ?>">Gap Year</a></li>
          </ul>
        </li>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/voice/' ) ); ?>">Voice</a></li>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/contact/' ) ); ?>">Contact</a></li>
      </ul>
    </nav>
  </header>
  
    <!-- hamburgerMenu -->
    <nav id="nav">
    <ul>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a></li>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/about/' ) ); ?>">About</a></li>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/case/' ) ); ?>">Case</a></li>
        <li>
          <a class="js-header">Gaps</a>
          <ul>
            <li><a class="js-header" href="<?php echo esc_url( home_url( '/gaptime/' ) ); ?>">Gap Time</a></li>
            <li><a class="js-header" href="<?php echo esc_url( home_url( '/gapday/' ) ); ?>">Gap Day</a></li>
            <li><a class="js-header" href="<?php echo esc_url( home_url( '/gapweek/' ) ); ?>">Gap Week</a></li>
            <li><a class="js-header" href="<?php echo esc_url( home_url( '/gapyear/' ) ); ?>">Gap Year</a></li>
          </ul>
        </li>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/voice/' ) ); ?>">Voice</a></li>
        <li><a class="js-header" href="<?php echo esc_url( home_url( '/contact/' ) ); ?>">Contact</a></li>
      </ul>
    </nav>
    <div id="hamburger">
      <!-- 1番上の線 -->
      <span class="inner_line" id="line1"></span>
      <!-- 真ん中の線 -->
      <span class="inner_line" id="line2"></span>
      <!-- 1番下の線 -->
      <span class="inner_line" id="line3"></span>
    </div>

  <script>
    function hamburger() {
      document.getElementById('line1').classList.toggle('line_1');
      document.getElementById('line2').classList.toggle('line_2');
      document.getElementById('line3').classList.toggle('line_3');
      document.getElementById('nav').classList.toggle('in');
    }
    document.getElementById('hamburger').addEventListener('click' , function () {
      hamburger();
    } );
  </script>

  <main>

■responsive .Css

  header {
    display: none;
  }
  #nav ul li{
    margin-top: 1rem;
    margin-left: 4rem;
    padding-top: 0.2rem;
    text-decoration: none;
    transition: all 0.15s, transform 0.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  #nav a{
    display: block;
    color: #97cdf3;
    opacity: 1;
    font-size: 1.4rem;
  }
  #nav li a:active{
    color: gray;
    transition: all .3s 0s ease;
  }
  #nav ul li ul {
    margin-top: 12px;
  }
  #nav ul li ul > li {
    padding: 0.15rem 0;
    margin: 0 0 0 20px;
    width: 110px;
  }
  #nav ul li ul > li > a {
    font-size: 1.25rem;
    margin-top: 5px;
  }
  /* ハンバーガーメニュー のアイコン */
  #hamburger {
    display: block;
    position: absolute;
    top: 2rem;
    right: 1.5rem;
    width: 2.2rem;
    height: 2.2rem;
    cursor: pointer;
    transition: 1s;
    z-index: 1000;
  }

  .inner_line {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background-color: gray;
    transition: 1s;
    border-radius: 5px;
    margin: 0;
    padding: 0;
  }

  #line1 {
    top: 0;
    transform-origin: top left;
  }
  #line2 {
    top: 45%;
  }
  #line3 {
    bottom: 0;
    transform-origin: bottom left;
  }


/* ハンバーガーメニュー の動き */
  .in{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 16rem;
    height: 600px;
    background: #000;
    opacity: 0.7;
    transition: 0.5s;
    z-index: 20;
    /* transform: translateX(0%)!important; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    transform-origin: bottom left;
  }
  .line_1 {
    transform: rotate(45deg);
    top: 0;
    width: 130%;
    background-color: #fff;
    opacity: 0.7;
  }
  .line_2 {
    opacity: 0;
  }
  .line_3 {
    transform: rotate(-45deg);
    bottom: 0;
    width: 130%;
    background-color: #fff;
    opacity: 0.7;
  }

ご教示お願いいたします。