Html – Why is my menu going off the screen, but its still visible?

I’m currently creating the menu sidebar for mobile devices and when I hide the menu, it ends up going off the screen, but still visible once you swipe to the right.
screenshot of problem

Also, feel free to point out any issues in my code since I’m pretty new to web development!

      <nav>
        <a href="index.html"> LOGO</a>
        <div class="nav-links" id="navLinks">
          <i class="fa-solid fa-xmark icon" onclick="hideMenu()"></i>
          <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">GALLERY</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">CONTACT</a></li>

          </ul>
        </div>
        <i class="fa-solid fa-bars icon" onclick="showMenu()"></i>
      </nav>

@media(max-width: 700px){
  .text-box h1{
    font-size:30px;
  }
  .nav-links ul li{
    display: block;
    font-size: 30px;
  }
  .nav-links{
    position: absolute;
    background:#337195;
    height:100vh;
    width:250px;
    top:0;
    right:-300px;
    text-align:left;
    z-index: 2;
    transition: 1s;
  }
  .icon { 
    display: block;
    color:white;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }
  .nav-links ul{
    padding: 30px;
  }
  .nav-links ul li::after{
    width: 100%;
    background:white; 
  }

}

Javascript of menu show/hide animation

<script>
  var navLinks = document.getElementById("navLinks")

  function showMenu(){
    navLinks.style.right = "0"
  }
  function hideMenu(){
    navLinks.style.right = "-300px"
  }
</script>