在全尺寸顯示器上沒有問題，但當我在開發工具中嘗試響應屏幕尺寸(更大或更小)時，會產生x溢出滾動。我試過body { overflow-x: hidden！重要}，但還是有x軸滾動。除非單擊菜單，否則頁面右側會隱藏一個導航欄。當菜單被點擊并且導航條顯示時，沒有溢出。當我刪除導航條的代碼時，也沒有溢出。問題肯定出在導航條上。有沒有替代的方法或解決方案來確保頁面沒有overfl ow-x滾動，或者有人可以指出我的nav代碼中需要更改什么才能使overflow-x: hidden工作？

#hamburger__menu__home {
  background-color: #000;
  z-index: 10;
}
.menu__btn__home {
  position: absolute;
  right: 20px;
  width: 130px;
  height: auto;
  cursor: pointer;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 5px 5px 5px 10px;
  border-radius: 5px; 
}
#menu__toggle:checked+.menu__btn__home .menu__hamburger {
  transform: rotate(45deg);
}
#menu__toggle:checked+.menu__btn__home .menu__hamburger::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked+.menu__btn__home .menu__hamburger::after {
  top: 0;
  transform: rotate(90deg);
  position: fixed;
}
.menu__btn__home .menu__hamburger,
.menu__btn__home .menu__hamburger::before,
.menu__btn__home .menu__hamburger::after {
  display: block;
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: #FFF;
  transition-duration: .5s;
}
.menu__btn__home .menu__hamburger::before {
  content: '';
  top: -8px;
}
.menu__btn__home .menu__hamburger::after {
  content: '';
  top: 8px;
}
#menu__toggle:checked~.menu__box__home {
  right: 0 !important;
}
.menu__box__home {
  display: block;
  position: absolute;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: rgba(79, 112, 148, 0.8);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .7);
  transition-duration: .5s;
  z-index: 10;
}

<div id="hamburger__menu__home">
  <input id="menu__toggle" type="checkbox" />
  <label class="menu__btn__home" for="menu__toggle">
    <div id="menu" class="home__menu">MENU</div>
    <div><span class="menu__hamburger"></span></div>
  </label>

  <ul class="menu__box__home">
    <li><a class="menu__item" href="index.html">HOMEPAGE</a></li>
    <li><a class="menu__item" href="news.html">NEWS</a></li>
    <li><a class="menu__item" href="about.html">ABOUT IMPACT</a></li>
    <li><a class="menu__item" href="facilities.html">FACILITIES</a></li>
    <li><a class="menu__item" href="people.html">PEOPLE</a></li>
    <li><a class="menu__item" href="publications.html">PUBLICATIONS</a></li>
    <li><a class="menu__item" href="epo.html">EDUCATION / PUBLIC OUTREACH</a></li>
    <li><a class="menu__item" href="sservi.html">SSERVI / TEAMS</a></li>
    <li><a class="menu__item" href="media.html">MEDIA</a></li>
    <li><a class="menu__item" href="meetings.html">MEETINGS</a></li>
    <li><a class="menu__item" href="contact.html">CONTACT</a></li>
  </ul>
</div>