I code exactly like in a current YouTube video, in the video the cards are shown in a row, in my case they are strangely as a column.

Why? Default should actually be in line. Even if I explicitly enter direction="row" in the grid container, it still doesn't help.

App.js

import "./App.css";
import TourCard from "./components/TourCards";
import Container from "@mui/material/Container";
import { Grid } from "@mui/material";

function App() {
  return (
    <div className="App">
      <Container>
        <Grid Container spacing={4} direction="row">
          <TourCard />
          <TourCard />
          <TourCard />
          <TourCard />
        </Grid>
      </Container>
    </div>
  );
}

export default App;

TourCards.js

import Paper from "@mui/material/Paper";
import { Grid, Typography } from "@mui/material";
import Logo from "../logo.svg";

const TourCard = () => {
  return (
    <Grid item xs={3}>
      <Paper elevation={3}>
        <img
          src={Logo}
          alt="logo"
          clasName="img"
        />
        <Typography>Nr.1</Typography>
      </Paper>
    </Grid>
  );
};

export default TourCard;