I am unable to use justify-self on my .cart div

Question

I am trying to move my .cart div to the end of my nav bar but I am not having any luck. I am able to move there by using align-self when I switch the parent div from flex-direction: row to flex-direction: column.

const NavBar = ({ user, handleLogout }) => {
  return (
    <nav>
      {user ?
        <div className={styles.mainnav}>
          <div className={styles.techcen}><Link to="/">TECH CENTER</Link></div>
          <div className={styles.account}><Link to="/account">Account</Link></div>
          <div className={styles.cart}><Link to="/cart">Cart</Link></div>
        </div>

        
      :
        <ul>
          <li><Link to="/login">Log In</Link></li>
          <li><Link to="/signup">Sign Up</Link></li>
        </ul>
      }
    </nav>
 

Here's my CSS:

nav {
    background-color: lightslategrey;
    display: flex;
}

.mainnav {
    
    display: flex;
    flex-basis: 100%;
    
}

.cart {
border: 1px solid red;    
align-self: flex-end;
justify-self: center;
}