How to fix too much space between images when using horizontal scroll

I'm trying to build a basic movie app using the OMDB api with a basic interface and search functionality implemented so far. When the results show up, there's a huge space between each movie poster. I'm still learning and cannot figure out how to fix this.

The page

.movie-app > .row{
  overflow-x: auto;
  flex-wrap: nowrap;
}

This is the css code I have used to implement the horizontal scroll.

const App = () => {
  const [movies, setMovies] = useState([]);
  const [searchValue, setSearchValue] = useState("");

  const getMovieRequest = async () => {
    const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=473e63b8`;

    const response = await fetch(url);
    const responseJson = await response.json();

    if (responseJson.Search) {
      setMovies(responseJson.Search);
    }
  };

  useEffect(() => {
    getMovieRequest(searchValue);
  }, [searchValue]);

  return (
    <div className="container-fluid movie-app">
      <div className="row d-flex align-items-center mt-4 mb-4">
        <MovieListHeading heading="Movies" />
        <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
      </div>
      <div className="row">
        <MovieList movies={movies} />
      </div>
    </div>
  );
};

export default App;

App.js

const MovieList = (props) => {
  return (
    <>
      {props.movies.map((movie, index) => (
        <div className="image-container d-flex justify-content-start m-3">
          <img src={movie.Poster} alt="movie"></img>
        </div>
      ))}
    </>
  );
};

export default MovieList;

Movie List component

According to document, the row class in bootstrap makes the columns inside the node equal-width as default. To make the columns be fit by content width of the node, try to use row row-cols-auto.

Instead of this:

  <div className="row">
    <MovieList movies={movies} />
  </div>

Try this instead:

  <div className="row row-cols-auto">
    <MovieList movies={movies} />
  </div>