要素が画面外に取り残される

サイト模写をしています。

ヘッダー部分に関して、画面幅が大きいときは問題ないのですが、画面幅を狭めると画面右上のハンバーガーメニューが画面の外に取り残されている状態になります。
これを、画面幅が狭くなった時も画面内に収めるにはどうすればいいのでしょうか。

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/header.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
  <header class="header wrapper">
    <h1><a href="#"><img src="img/logo.svg" alt=""></a></h1>

    <div class="hamburger" id="js-hamburger">
      <span class="hamburger-line hamburger-line1"></span>
      <span class="hamburger-line hamburger-line2"></span>
    </div>
    
    <div class="black-bg" id="js-black-bg"></div>
    
    <nav class="global-nav">
      <ul class="global-nav-list">
        <li class="global-nav-item"><a href="">PRODUCTS</a></li>
        <li class="global-nav-item"><a href="">ABOUT</a></li>
        <li class="global-nav-item"><a href="">COMPANY</a></li>
        <li class="global-nav-item"><a href="">CONTACT</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div id="top">
      <ul>
        <li>
          <a href="#">
            <img src="img/item1.jpg" alt="">
            <p>プロダクトタイトルプロダクトタイトル</p>
            <p>￥99,999 +tax</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/item2.jpg" alt="">
            <p>プロダクトタイトルプロダクトタイトル</p>
            <p>￥99,999 +tax</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/item3.jpg" alt="">
            <p>プロダクトタイトルプロダクトタイトル</p>
            <p>￥99,999 +tax</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/item4.jpg" alt="">
            <p>プロダクトタイトルプロダクトタイトル</p>
            <p>￥99,999 +tax</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/item5.jpg" alt="">
            <p>プロダクトタイトルプロダクトタイトル</p>
            <p>￥99,999 +tax</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/item6.jpg" alt="">
            <p>プロダクトタイトルプロダクトタイトル</p>
            <p>￥99,999 +tax</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/item7.jpg" alt="">
            <p>プロダクトタイトルプロダクトタイトル</p>
            <p>￥99,999 +tax</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/item8.jpg" alt="">
            <p>プロダクトタイトルプロダクトタイトル</p>
            <p>￥99,999 +tax</p>
          </a>
        </li>
      </ul>
    </div>
  </main>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

  <script src="js/5-2-2.js"></script>
</body>
</html>

css

.header {
width: 100%;
max-width: 1360px;
margin: 0 auto;
display: flex;
justify-content: space-between;
position: fixed;
left: 0;
right: 0;
top: 0;
height: 80px;
background-color: rgb(255, 255, 255);
}

.global-nav {
position: fixed;
z-index: 200;
width: 160px;
height: 100vh;
left: -320px;
top: 0;
padding-top: 20px;
transition: all .6s;
overflow-y: auto;
}
.global-nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.global-nav-item {
text-align: center;
padding: 0 14px;
}
.global-nav-item a {
display: block;
padding: 8px 0;
text-decoration: none;
color: #111;
font-size: 14px;
color: white;
}

.hamburger {
position: relative;
top: 10px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 300;
}

.hamburger-line {
position: absolute;
left: 11px;
width: 18px;
height: 1px;
background-color: #111;
transition: all .6s;
}
.hamburger-line1 {
top: 22px;
}
.hamburger-line2 {
top: 29px;
}

.black-bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: #000;
opacity: 0;
visibility: hidden;
transition: all .6s;
cursor: pointer;
}

.global-nav.nav-open {
left: 0;
}
.black-bg.nav-open {
opacity: .8;
visibility: visible;
}
.hamburger.nav-open span {
background-color: #fff;
}
.nav-open .hamburger-line1 {
transform: rotate(-45deg);
top: 20px;
}
.nav-open .hamburger-line2 {
transform: rotate(45deg);
top: 20px;
}

css2

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.wrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

#top {
  max-width: 1440px;
  margin: 0 auto;
}

#top ul {
  padding: 80px 40px 160px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#top li {
  width: 23%;
  height: auto;
}

#top img {
  width: 100%;
}
/*# sourceMappingURL=style.css.map */