显示器：Flex；不是让照片并排

当我启动react应用程序时，它不会并排显示图片-My Row.js文件-

import React, { useState, useEffect } from 'react';
import axios from './axios';
import './Row.css';

const base_url = "https://image.tmdb.org/t/p/original/";

function Row({ title, fetchUrl }) {
    const [movies, setMovies] = useState([]);

    useEffect(() => {
        async function fetchData() {
            const request = await axios.get(fetchUrl);
            setMovies(request.data.results);
            return request;
        }
        fetchData();
    }, [fetchUrl]);

    console.table(movies);

    return (
        <div className="row">
            <h2>{title}</h2>

            <div classname="row_posters">
                {/* several row_poster(s) */}

                {movies.map(movie => (
                    <img
                        className="row_poster"
                        src={`${base_url}${movie.poster_path}`} 
                        alt={movie.name} 
                    />
                ))}
            </div>
        </div>
    );
}

export default Row

我的Row.css文件-

.row_posters {
    display: flex
}

.row_poster {
    object-fit: contain;
    width: 100%;
    max-height: 100px;
    margin-right: 10px;
    transition: transform 450ms;
}

它只显示向下的图片，而不是旁边的图片。我在下面提供了一张图片，说明它现在显示的内容。我希望这些照片并排排列，但它只显示直线向下。