Items are not displaying horizontally as expected - html

Question

Hi I have been trying to create a list, displaying image items, but am having issues getting the images displaying horizontally, the overflow-x scroll bar is apperaing but the items not adjusting proparly. using tailwind-css.
This is the code for displaying the row items.
return (
<>
<h1 className='text-white font-bold ms-text-xl p-4'>{title}</h1>
<div className='relative flex items-center '>
<div className=' w-full h-full overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide relative inline-block'>
{movies?.map((item,id) => (
<Movie key={id} item={item} />
))}
</div>
</div>
</>
)
This is the code returns the movie images
return (
<div>
<div className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block relative p-2'>
<img className='w-full h-auto block' src={`https://image.tmdb.org/t/p/w500/${item.backdrop_path}`} alt='movie?.title'/>
<div className='absolute top-0 left-0 w-full h-full hover:bg-black/80 opacity-0 hover:opacity-100 text-white'>
<p className=' whitespace-normal text-xs md:text-sm font-bold flex justify-center items-center h-full text-center ' >{item?.title}</p>
<div className='absolute flex items-center justify-end gap-2 right-2 top-2'>
<p className=' whitespace-normal text-xs md:text-sm font-medium text-yellow-500 text-center '>IMDb:⭐{item?.vote_average}</p>
<div>{wishlist ? <FaHeart className=''/> :<FaRegHeart className=' bg-red-600 '/> } </div>
</div>
</div>
</div>
</div>
)
This the result displying:
I just want to be able to displaying the images horizontally in the window and have the scroll bar to hide. like this:

Answer 1

in this wrapper div add flex overflow-x-hidden
<div className='flex overflow-x-hidden w-full h-full overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide relative inline-block'>
{movies?.map((item,id) => (
<Movie key={id} item={item} />
))}
</div>