Nav menu doesn't size properly - html

Question

I'm currently having some issues with this navbar. The pc version works great, though mobile version seems to size the width of the menu a bit too big making all the items in the nav not center properly.
In the picture above, you can see the mobile view. We can identify that the menu is not centered by looking at the border radius on the bottom. I've also dotted the first nav item with the same dimensions on both sides.
Here's a jsfiddle if you'd like to try it yourself:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}
const navLink = document.querySelectorAll(".nav-link");
navLink.forEach(n => n.addEventListener("click", closeMenu));
function closeMenu() {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,500;1,400&display=swap');
.navbar {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar html {
font-size: 62.5%;
font-family: 'Roboto', sans-serif;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background-color: #353535;
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fff;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-item {
margin-left: 3rem;
}
.nav-link {
font-size: 1.6rem;
font-weight: 400;
color: #7ef284;
}
.nav-link:hover {
color: #6dd573;
}
.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #7ef284;
}
#media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -200%;
top: 3rem;
flex-direction: column;
background-color: #353535;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
border-radius: 0 0 15px 15px;
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<header class="header">
<nav class="navbar">
Demo
<ul class="nav-menu">
<li class="nav-item">
Home page
</li>
<li class="nav-item">
Info
</li>
<li class="nav-item">
Privacy Policy
</li>
<li class="nav-item">
Contact
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>

Answer 1

Thanks to #CBroe, I got it working by setting padding-left to 0.