.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;

Así que tengo una barra de navegación y estoy tratando de alinear los elementos en una fila, pero por alguna razón, como puede ver en la imagen, la pestaña de pedido anticipado está en la parte inferior y no quiero que esté allí, pero no se puede arreglar de alguna manera? Si agrego algo nuevo a la barra de navegación, todo permanece igual, pero siempre hay 1 elemento que desciende a la segunda línea sin importar cuántos elementos Nabber agregue (no cae más de un elemento). Estoy usando reaccionar para codificar el js. Pegué el css y js arriba. Por favor ayuda.