Navbar responsiveness problem - overflow problem?

Question

Hi Guys I am a newbie I am trying to create a burger button but for some reason , when I am inspecting the responsiveness it's making my html wide. instead of hiding the navigation links. I will post a picture so it makes sense.

navbar is not hidden,still able to see it if you scroll left

media queries

 @media (max-width:1200px) {
    html {
        font-size:49%;
    }

    .navbar {
        padding:1.5rem 2rem;
    }
}

@media (max-width:920px) {
    #menu-btn {
        display: inline-block;
    }
 

    .navbar .nav-links {
        position: absolute;
        top:101%;
        right:-100%;
        background-color: hsla(209, 54%, 52%, .7);
        width: 30rem;
        height:calc(100vh - 9.5rem);
        transition: .4s ease-in;

    }

    .navbar .nav-links.active {
        right:0;
    }
    .navbar .nav-links ul {
        display: block;
        margin:2rem 1.5;
        padding:.5rem;
        font-size:1.2rem;
    }
    .navbar .nav-links ul li {
        padding: 2rem 0;
    }


}

@media (max-width:350px) {

    
    .navbar {
        flex-direction: column;
    }

    .navbar .icons {
        margin: 2em 0;
        font-size:1.2rem;
    }
}

main css

:root {
    --main-color:hsl(209, 54%, 52%);
    --light-color:#69B4DE;
    --white-text-color:#fff;
}

html {
    font-size:62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 9rem;
    height:200vh;
    overflow-x: hidden;
    
}

* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Roboto', sans-serif; ;
    
  
}
body {
    background-color:#dfe3ee;
    
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}


/* header section styling starts */

.navbar {
    display: flex;
    justify-content: space-between;
    text-align: center;
    background: #4287C7;
    margin:1% 3%;
    align-items: center;
    padding:2%;
    /* border-radius: 10px; */
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index: 1000;
    /* overflow-y: hidden; */

}

.navbar .logo img {
    height:10em;
}

.navbar .nav-links ul {
    display: flex;
}

.navbar .nav-links ul li {
    margin:0 2em;
}

.navbar .nav-links ul li a {
    color:#fff;
    text-transform: uppercase;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:300;
    letter-spacing: 1px;
    font-size:1.5em;
}

.navbar .nav-links ul li a:hover,
.navbar .nav-links ul .active,
.navbar .icons i:hover
{ 
    color:#69B4DE;
   
}

.navbar .icons i{
    color:#fff;
    margin:0 .5em;
    font-size:2em;
    cursor:pointer;
}

#menu-btn {
    display: none;
}

Answer 1

The problem is that when you set the navbar go to right that means the body width gonna take the space of this navbar because the space in right of the body is opened you can scroll right. But it is closed from the left you can not scroll left. if you take your navbar to left left: -100%; this gonna work and the navbar is hidden to left. But if you take the navbar to right right: -100%; this gonna not work because the space is opened from right you can scroll to view the navbar. The solution for this problem is to set a width and height to the body tag and finally add overflow: hidden; to hide any element out of the body width.

Solution :

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}