don't show scrollbar on the x-axis

Question

I am learning for Nextjs and tailwind CSS.

But, I have a problem with scrollbar.

I want to have scrollbar on the x-axis

This is my code

<section>
    <h2 className="text-4xl font-semibold py-8">Live Anywhere</h2>
    <div className="flex space-x-3 overflow- scrollbar-hide">
            {cardsData?.map(({ img, title }) => (
              <MediumCard key={img} img={img} title={title} />
            ))}
    </div>
</section>

Only have scrollbar on the y-axis.