Why would flex-direction not work work the way I have it set up? REACT js

its simple. theres a heading, a search bar, and some rendered content from an API. pretty basic stuff. and even more basic, I call a API to display a bunch of movie images below the search bar. ever simplier right? search.map starts the mapping process and below that I have an ul with some li items being that are going to be displayed. BUt they only go down...it feels impossible to get them going side to side. Ive tried putting display flex and flex-direction row on diffrent divs, ive tried putting !important after the elements css are defined. nothing. any ideas on whats going on? heres the code..

.form-div {
  margin-bottom: 1rem;
}

.container {
  align-items: center;
}

.searchbar {
  width: 760px;
  font-size: 1 rem;
  font-weight: 400;
  line-height: 1.5;
  outline: none;
  background-color: blanchedalmond;
  color: grey;
  border: 1x solid blueviolet;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
}

.searchBtn {
  color: white;
  background-color: black;
  font-size: 1rem;
  outline: none;
  min-height: 36px;
  font-weight: 400px;
  text-align: center;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.img-container h1 {
  padding: 10px;
}

.image-element {
  width: 250px;
  height: 320px;
  padding-left: 5px;
  padding-right: 5px;
}

.data-container {
  padding: 5px;
}

.flexed {
  display: flex;
  flex-direction: row;
  list-style: none;
}

import "./SearchBar.css";
import React, { useState } from "react";

const SearchBar = () => {
  const [search, setSearch] = useState([]);
  const [input, setInput] = useState("");

  const onUserInput = ({ target }) => {
    setInput(target.value);
  };

  const SearchApi = (event) => {
    const aUrl = "";
    const newUrl = aUrl + "&query=" + input;

    event.preventDefault();

    fetch(newUrl)
      .then((response) => response.json())
      .then((data) => {
        setSearch(data.results);
      })
      .catch((error) => {
        console.log("Error!! Data interupted!:", error);
      });
  };

  return (
    <div>
      <div className="container">
        <h1>Movie Search Extravaganza!</h1>

        <form>
          <input
            value={input}
            onChange={onUserInput}
            type="text"
            className="searchbar"
            aria-label="searchbar"
            placeholder="search"
          ></input>
          <button
            type="submit"
            onClick={SearchApi}
            aria-label="searchbutton"
            className="searchBtn"
          >
            Movie Express Search
          </button>
        </form>
      </div>

      {search.map((item) => (
        <ul className="flexed">
          <li key={item.id}>
            <img
              className="image-element"
              alt="poster"
              src={`https://image.tmdb.org/t/p/w500${item.poster_path}`}
            ></img>
          </li>
        </ul>
      ))}
    </div>
  );
};