Tailwind CSS风格的导航条不会水平滚动

我的导航条不会水平滚动，只在垂直方向上滚动一小段。我正在使用tailwind-scrollbar-hide插件，并将其添加到我的配置文件中。

    import requests from "../utils/requests";
    
    function Nav() {
      return (
      <nav className="relative">
        <div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap
         space-x-10 sm:space-x-20 overflow-x-scroll overflow-y-hidden scrollbar-hide">
            {Object.entries(requests).map(([key, { title, url }]) => (
              <h2 
              key={key} 
              className="last:pr-24 cursor-pointer transition duration-100 transform hover:scale-125 hover:text-white
              active:text-red-500 "
              >
                {title}
              </h2>
            ))}
        </div>
        <div className="absolute top-0 right-0 bg-gradient-to-l from-[#06202A] h-10 w-1/12" />
      </nav>
      );
    }
    
    export default Nav;