如何防止我的网站汉堡菜单让人们水平滚动

Question

I wanted to know how I would go about preventing people on mobile from swiping sideways after they open and close my hamburger menu. It works fine before they open it but after it breaks and next time it closed they can scroll sideways. I've tried the things suggested on other questions to no avail. It's not a very big site yet so there isn't much there.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Website: mostwantedrbx.github.io

Repo: https://github.com/MostwantedRBX/MostwantedRBX.github.io

Answer 1

this might help

body {
    overflow-x: hidden !important;
}
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

Answer 2

Give the.nav-links a position of fixed instead of absolute.

@media screen and (max-width: 788px) {
.nav-links {
    position: fixed; /* instead of absolute */ 
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

}