嗨，我一直在尝试创建一个列表，显示图像项目，但我有问题，让图像显示水平，溢出x滚动条出现，但项目没有调整proparly。使用tailwind-css。
这是用于显示行项的代码。

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>
    </>
  )

这是返回电影图像的代码

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>
  )

这是显示的结果：

我只想能够在窗口中水平显示图像，并隐藏滚动条。就像这样：