How can I stop my material UI Cards from going off screen creating a horizontal scroll situation?

I have created 5 components that are wrapped inside a component. I want all 5 of those cards to stay in one row whether the screen size increases or decreases. With my current code, the cards show up in one row, but they go over the screen. I would have to scroll to the right in order to see the fifth card.

I want to be able to see all five cards on the screen regardless of the screen size. At the very least, all of them together on a screen larger than an iPad. Please help.

Code Below:

"time-card" component

import * as React from 'react';
import {
  Card,
  CardHeader,
  CardMedia,
  CardContent,
  Typography,
} from '@mui/material';
import Icon from './images/icon.png';
import { makeStyles } from '@mui/styles';
import { variables } from 'theme';

const useStyles = makeStyles({
  card: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    textAlign: 'center',
    minWidth: 400,
    maxWidth: 500,
    height: '100%',
    position: 'relative',
    backgroundColor: '#7b1f82',
    backgroundImage: 'linear-gradient(#891f7e, #6d2386)',
    minHeight: '600px',
    maxHeight: '700px',
    margin: 10,
    padding: '30px',
    flexGrow: 1,
    flexShrink: 1,
  },
  mediaSize: {
    width: 70,
    display: 'flex',
    alignSelf: 'center',
  },
  Icon: {
    display: 'flex',
    alignSelf: 'center',
    marginTop: '20px',
    boxShadow: `8px 7px 9px 2px #600562`,
    borderRadius: '50%',
    height: '400',
    width: 90,
    padding: 7,
  },

  cardHeader: {
    marginBottom: 0,
    padding: 0,
  },
  eventName: {
    marginBottom: '15 0',
    fontWeight: 600,
    fontSize: 70,
    align: 'center',
  },

  cardContent: {
    marginTop: 0,
    paddingTop: 0,
  },

  eventBeginTime: {
    fontSize: 55,
    fontWeight: 600,
  },

  eventEndTime: {
    fontSize: 65,
    fontWeight: 600,
  },
});

const TimeCard = () => {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.Icon}
        component="img"
        image={Icon}
      ></CardMedia>
      <CardHeader
        flexGrow={1}
        className={classes.cardHeader}
        title={
          <Typography className={classes.eventName} align="center">
            Event
          </Typography>
        }
      />
      <CardContent className={classes.cardContent}>
        <Typography color={variables.primary.main} variant="h2">
          Begins
          <Typography className={classes.eventBeginTime}>5:00 AM</Typography>
        </Typography>
        <Typography color={variables.white} variant="h2">
          Ends
          <Typography className={classes.eventEndTime}>6:00 AM</Typography>
        </Typography>
      </CardContent>
    </Card>
  );
};
export default TimeCard;

"Time-card-grid" component

import * as React from 'react';
import Grid from '@mui/material/Grid';
import { makeStyles } from '@mui/styles';
import TimeCard from './time-card';

const useStyles = makeStyles({
  timeCardGrid: {
    margin: 0,
  },
});

const TimesGrid = () => {
  const classes = useStyles();
  return (
    <div style={{ maxWidth: '100%' }}>
      <Grid container className={classes.timeCardGrid} wrap="nowrap">
        <TimeCard />
        <TimeCard />
        <TimeCard />
        <TimeCard />
        <TimeCard />
      </Grid>
    </div>
  );
};

export default PrayerTimesGrid;