How do I remove the horizontal scroll bar from my Navbar - html

Question

I'm trying to make a responsive site, in which when the width decreases, my nav-links go out of sight, but there is a ***Horizontal Scroll Bar***, that I want to get rid of. I've viewed other question for this, but none of them helped me.
Any Suggestions?
Thank in advance
HTML
<header class="head">
<nav class="navbar">
<div class="logo">
Krishang Sharma
</div>
<ul class="nav-items">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="crossMenu">
<div class="line1"></div>
<div class="line2"></div>
</div>
<!-- Theme Toggle Switch -->
<div class="switch">
<div class="bg">
<div class="circle"></div>
</div>
</div>
</nav>
</header>
CSS
.navbar{
width: 100vw;
height: 10vh;
display: flex;
align-items: center;
font-family: 'Poppins', serif;
justify-content: space-evenly;
box-shadow: 0px 15px 20px #1e1e1e;
}
.logo{
width: 40%;
}
.logo a{
color: white;
transition: 0.3s;
font-size: 1.5rem;
text-decoration: none;
}
.logo a:hover{
transition: 0.3s;
color: #639FAB;
}
.nav-items{
width: 40%;
display: flex;
justify-content: space-around;
}
.nav-items, li a{
align-items: center;
height: 100%;
font-size: 18px;
color: white;
list-style: none;
transition: 0.3s;
text-decoration: none;
}
.nav-items a:hover{
transition: 0.3s;
color: #639FAB;
}
.crossMenu{
cursor: pointer;
display: none;
margin-right: 2%;
}
.line1, .line2{
margin: 4px;
height: 4px;
width: 35px;
transition: 0.5s ease;
border-radius: 25px;
background: #639FAB;
}
.switch{
cursor: pointer;
align-items: center;
}
.bg{
height: 20px;
width: 60px;
background: white;
border-radius: 10px;
transition: 0.5s ease;
}
.circle{
right: 5px;
top: -5px;
width: 30px;
height: 30px;
position: relative;
border-radius: 50%;
transition: 0.5s ease;
background: #639FAB;
}
.circleOn{
background: white;
right: -35px;
transition: 0.5s ease;
}
.bgOn{
transition: 0.5s ease;
background: #639FAB;
}
For Lower Resoultion
.nav-items{
right: 15%;
position: absolute;
transition: 0.5s ease;
transform: translateX(200%);
}

Answer 1

Add overflow-x: hidden; to the style= attribute of your navbar.

Answer 2

Why You have used transform: translateX(200%); on .nav-items element?. You should remove/add transform: translateX(0); on .nav-items this element. Then Horizontal Scroll Bar will not show