White space to the right side of my header/navbar

Question

When i scroll to the right the header/navbar has a white space that just goes on,with the size of my pages contents. enter image description here

ive set the width to 100% it doesnt change anything,heres the css piece

nav {
    width: 100%;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0288D1 ;
    color: white;
    padding:0rem 4rem;
    position: sticky;
    top: 0;

}

heres the jsx file(its a react website)

       <nav>

       <div className="logo">
       <img src={TMElogo} alt=""/>
         </div>
         <h4>TME</h4>
        <div className='menu' onClick={() => {
            setMenuOpen(!menuOpen)
        }}>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <ul className={menuOpen ? "open" : ""}>
            <li>
            <NavLink to="/">HOME</NavLink>
            </li>
            <li>
            <NavLink to="/hummingbird">HUMMINGBIRD</NavLink>
            </li>
            <li>
            <NavLink to="/about">ABOUT</NavLink>
            </li>
        </ul>

         </nav>

ive tried to look for any unwanted padding , and ive checked if theres any width overriding this in any other sections,ive also tried the !important(i know its not good practice) didnt work. what could be the problen?