Text appearing under NavBar -REACT

Question

I don't know why when i click on the About icon (or other icons in the menu bar), I get the text under my NavBar instead of having it next to it.

The NavBar.jsx component:

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>
    );
}

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

And here the picture of what i get (there are other icons above About):

(I'm not able to put all the css file, because it says "too many codes")