No sé por qué cuando hago clic en el ícono Acerca de (u otros íconos en la barra de menú), obtengo el texto debajo de mi barra de navegación en lugar de tenerlo al lado.

El componente NavBar.jsx:

 import './NavBar.css' import logo from "../Components/logo"; import { ITEMS } from "../Navigation"; import React from 'react' export default function NavBar() { return ( <div className="NavBar"> <img className="logo" /> <span className="textLogo">LOGO</span> <div className ="NavbarList"> {ITEMS.map((item, i) => { return ( <li key={i} className="row" id={window.location.pathname === item.href ? "active" : ""} onClick={() => {window.location.pathname = item.href;}}> <div id="icon">{item.icon}</div> <div id="title">{item.title}</div> </li> ); })} </div> </div> ); }

Mi NavBar.css:

 .NavBar{ width: 15rem; height: 100vh; padding-top: 1rem; padding-bottom: 1rem; --tw-bg-opacity: 1; background-color: rgb(35,37,79); flex-direction: column; gap: 1.25rem } .NavbarList{ padding-top:20px; } ...

Y aquí la imagen de lo que obtengo (hay otros íconos arriba de Acerca de):

(No puedo poner todo el archivo css, porque dice "demasiados códigos")