我目前正在为一个网站的导航栏工作，但由于某种原因，我的justify-content：space-between在最后一个项目的右侧添加另一个空格
就像在最右边还有一个项目，但是没有
我该如何解决这个问题？x1c 0d1x

/* Header start */

.navbar {
  position: fixed;
  width: 100%;
  padding: 30px 0;
  transition: 0.4s ease-in-out;
}

.navbar.sticky {
  padding: 10px 0;
  background: #080808;
  z-index: 99999;
}

.navbar.sticky .menu li a:hover {
  color: crimson;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.4s ease-in-out;
}

.navbar.sticky .max-width {
  padding: 10px 40px;
  transition: 0.4s ease-in-out;
}

/* Logo start */

.navbar .logo {
  /* justify-content: center; Remove this to put content left */
  display: flex;
  align-items: center;
}

.navbar .logo a {
  color: #ececec;
  font-size: 1.5rem;
  font-weight: 700;
}

.navbar .logo img {
  width: 40px;
  margin-right: 10px;
}

/* Logo end */

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  color: #ececec;
  font-size: 1.1rem;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  color: #2666ff;
}

/* Header end */

<nav class="navbar">
  <div class="max-width">
    <div class="logo">
      <img src="img/favicon/favicon.png" alt="">
      <a href="#"><span></span>Labfold</a>
    </div>
    <ul class="menu">
      <li><a href="#main">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Careers</a></li>
    </ul>
    <div class="menu-btn">
      <div class="menu-btn_burger"></div>
    </div>
  </div>
</nav>