Use justify-contents: space-around; instead.

Remove the width:125px from the <li> tag, then use justify-contents: space-around to the parent tag.

HTML:

<ul class="navbar">
  <li><a>Home</a></li>
  <li><a>New Release</a></li>
  <li><a>Clothing</a></li>
  <li><a>Our Story</a></li>
</ul>

CSS:

.navbar {
  background-color: #131313;
  color: white;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.navbar li {
list-style-type:none;
}

This is the first time I am trying to make a website and the links in my nav bar are not spaced evenly. Is there a way to rewrite the code to properly space it or are there any CSS properties I can add to help

here is what the navbar links look like

CSS code:

.navbar {
    background: #131313;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  
  .navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 50px;
  }
  
  .navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
  }
  
  .navbar__item {
    height: 100px;
  }
  
  .navbar__links {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 125px;
    text-decoration: none;
    height: 100%;
    transition: all 0.3s ease;
    

  }

HTML:

   <ul class="navbar__menu">
           <li class="navbar__item">
               
                <a href="#home" class="navbar__links" id="home-page">Home</a>
            </li>
            <li class="navbar__item">
                <a href="#new" class="navbar__links" id="new-page">New Releases</a>
            </li>
            <li class="navbar__item">
                <a href="#clothing" class="navbar__links" id="clothing-page"
                >Clothing</a>
                
            </li>
          
            <li class="navbar__btn">
                <a href="#sign-up" class="button" id="signup">Sign Up</a>
            </li>
            </ul>