ReactJS中卡片组件外侧出现多余空白的问题求助

我通过循环渲染电影卡片，使用Grid容器且未设置gap-x，但卡片右侧仍出现多余空白；尝试用Flex居中卡片元素后，卡片两侧均出现多余空白，求帮忙解决这个布局问题。

问题截图：

卡片组件代码 #

<div className="flex justify-center">
  <div className="bg-theme-blue w-movie-card h-min rounded-movie-card shadow-movie-card flex-shrink-0">
    <img
      className="w-full"
      src={`https://image.tmdb.org/t/p/w780${posterImg}`}
      alt="img-poster"
    />
    <div className="flex p-2 justify-center items-center">
      <div className="text-theme-white font-semibold w-9/12">{title}</div>
      <div
        className={`font-semibold p-2 bg-theme-dark-blue ${setTagColor(
          voteAverage
        )}`}
      >
        {Math.round(voteAverage * 10) / 10}
      </div>
    </div>
  </div>
</div>

Grid容器代码 #

<div className={"grid lg:grid-cols-5 md:grid-cols-3 grid-cols-2 gap-y-3 " + className}>
  {children}
</div>

数据渲染代码 #

<GridContainer>
  {movies.map((movie) => {
    return <MovieCard {...movie}/>;
  })}
</GridContainer>

内容的提问来源于stack exchange，提问作者Het Patel