REACT, horizontal scrolling without width

I am attempting to create a navigation bar (navbar) for my website, but I am encountering an issue that I cannot seem to resolve. Specifically, I don’t understand why a scrollbar is appearing on the page when I have not explicitly set any width or height properties. I’ve checked the elements, and none of the tags involved have extra width or height applied to them, yet the scrollbar is still showing up. What’s even more puzzling is that the scrollbar disappears once I hover over the dropdown menu in the navbar. I am unsure of the cause of this behavior and would appreciate any insight or guidance on how to fix this. The example I used: https://codepen.io/riogrande/pen/nwmaNZ

const NavBarWithDrop = () => {
  const currentPath = window.location.pathname;
  const firstRouter = '/' + currentPath.split("/")[1];

  const navLinks = [
    { url: '/about', name: 'About' },
    { url: '/price-list', name: 'Price List' },
    { url: '/sales', name: 'Sales' },
    { url: '/reviews', name: 'Reviews' },
    { url: '/blog', name: 'Blog' },
    { url: '/contacts', name: 'Contacts' }
  ];

  const services = [
    {
      id: 1,
      name: 'Service 1',
      url: 'service-1',
      brands: [
        { id: 1, name: 'Brand 1', models: ['Model 1', 'Model 2'] },
        { id: 2, name: 'Brand 2', models: ['Model 3', 'Model 4'] }
      ]
    },
    {
      id: 2,
      name: 'Service 2',
      url: 'service-2',
      brands: [
        { id: 3, name: 'Brand 3', models: ['Model 5', 'Model 6'] }
      ]
    }
  ];

  return (
    <div className='flex justify-between items-center bg-shark-100 w-full border-b-2 border-shark-200 px-20'>
      <h1>Logo</h1>
      <nav className='text-base' id='cssmenu'>
        <ul className='!flex !items-center z-50 h-28'>
          {navLinks.map(link => (
            <li key={link.url} className={firstRouter === link.url ? 'active' : ''}>
              <a href={link.url}>{link.name}</a>
            </li>
          ))}

          <li className={`has-sub ${firstRouter.startsWith('/services') ? 'active' : ''}`}>
            <a href="/services">Services</a>
            <ul>
              {services.map(service => (
                <li key={service.id} className='has-sub'>
                  <a href={`/services/${service.url}`}>{service.name}</a>
                  <ul>
                    {service.brands.map(brand => (
                      <li key={brand.id} className='has-sub'>
                        <a href={`/services/${service.url}/${brand.id}`}>{brand.name}</a>
                        <ul>
                          {brand.models.map((model, idx) => (
                            <li key={idx}>
                              <a href={`/services/${service.url}/${brand.id}/${idx}`}>{model}</a>
                            </li>
                          ))}
                        </ul>
                      </li>
                    ))}
                  </ul>
                </li>
              ))}
            </ul>
          </li>
        </ul>
      </nav>

      <button onClick={() => alert('something')} className="w-40">Sign Up</button>
    </div>
  )
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <NavBarWithDrop />
);
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%
}

#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#cssmenu ul {
  position: relative;
  z-index: 597;
}

#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}

#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}

#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}

#cssmenu ul ul li {
  float: none;
}

#cssmenu ul ul ul {
  top: 0;
  left: auto;
  right: -99.5%;
}

#cssmenu ul li:hover > ul {
  visibility: visible;
}

#cssmenu ul ul {
  bottom: 0;
  left: 0;
}

#cssmenu ul ul {
  margin-top: 0;
}

#cssmenu ul ul li {
  font-weight: normal;
}

#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}

#cssmenu > ul {
  display: inline-block;
}

#cssmenu:after,
#cssmenu ul:after {
  content: "";
  display: block;
  clear: both;
}

#cssmenu a {
  background: transparent;
  color: #333;
  padding: 0 20px;
  white-space: nowrap;
}

#cssmenu ul {
  text-transform: uppercase;
}

#cssmenu ul ul {
  border-top: 4px solid #1b9bff;
  text-transform: none;
  min-width: 220px;
}

#cssmenu ul ul a {
  background: #1b9bff;
  color: #fff;
  border: 1px solid #0082e7;
  border-top: 0 none;
  line-height: 150%;
  padding: 10px 20px;
}

#cssmenu ul ul ul {
  border-top: 0 none;
}

#cssmenu ul ul li {
  position: relative;
}

#cssmenu > ul > li > a {
  line-height: 48px;
}

#cssmenu ul ul li:first-child > a {
  border-top: 1px solid #0082e7;
}

#cssmenu ul ul li:hover > a {
  background: #35a6ff;
}

#cssmenu ul ul li:last-child > a {
  border-radius: 0 0 3px 3px;
  box-shadow: 0 1px 0 #1b9bff;
}

#cssmenu ul ul li:last-child:hover > a {
  border-radius: 0 0 0 3px;
}

#cssmenu ul ul li.has-sub > a:after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}

#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
  color: #1b9bff;
  background: transparent;
}

#cssmenu ul li.has-sub > a:after {
  content: "+";
  margin-left: 5px;
}

#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}

#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>