Display: Flex; is not making the pictures be side by side

When I start the react app it doesn't show the pictures side by side - My Row.js file -

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

My Row.css file -

.row_posters {
    display: flex
}

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

It only shows the pictures going down and not by side. I have provided a picture below on what it shows right now. I want the pictures to go side by side but its showing straight down only.

In react we provide className like this not like classname...

classname="row_posters" should replace by className="row_posters"