.NavbarA {
  color: #bb9770;
  float: left;
}

.navbar {
    padding: 10px;
    margin: 0 auto;
    border: 1px solid #bb9770;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    background-color: #ffdab9;
  }
  
  .navbar .links {
    margin-left: auto;
    float: right;
    flex-wrap: nowrap;
    margin-top: 3px;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
  }
  .navbar a {
    margin-left: 16px;
    text-decoration: none;
    color: #bb9770;
    position: relative;
    padding: 10px;
    margin-bottom: auto;
    font-weight: bolder;
  }
  
  .navbar a:hover {
    color: white;
  }
  
  .navbar a::before {  
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  
  .navbar a:hover::before {
    transform: scaleX(1);
    transform: scaleY(2);
    transform-origin: bottom left;
  }
  
  .navbar a::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: #ffdab9;
    z-index: -1;
    transition: transform .3s ease;
  }
  
  @media(max-width: 800px) {
    .navbar .links {
      display: none;
      visibility: hidden;
    }}

^^^ CSS

const Navbar = () => {
  return (
    <nav className="navbar">
      <h2 className="NavbarA">A</h2>
      <div className="links">
        <a href="/">Home</a>
        <a href="/Sample">Sample</a>
        <a href="/staff">Staff</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
        <a href="/donate">Donate</a>
        <a href="/gallery">Gallery</a>
        <a href="/preorder">Preorder</a>
      </div>
    </nav>
  );
};

export default Navbar;

So I have a navbar and I am trying to align the items in one row, but for some reason, as you can see in the picture, the preorder tab is on the bottom and I don't want it to be there, but I can't fix it somehow? If I add anything new to the navbar, everything remains the same, but there is always 1 item that drops down to the second line no matter how many nabber items I add (no more than one item drops down). I am using react to code the js. I pasted the css and js above. Please help.