title: Why can't I get these cards to form a row. They are persistently falling into a column
body: <p>Here is the code I am using including the styling. It is a component for a React site, and for some reason I cannot get the cards to be evenly spaced in a row. I also will want to implement some breakpoints for smaller screen sizes but one that at a time unless anyone has ideas or reasons to do that first (I've heard from some coders to start with a small screen and work up.... any thoughts on that?) Let me know if there is anything else needed to figure out the issue and I appreciate and help in advance!</p>
  <pre><code>import React from &quot;react&quot;;  
  
  ...
  
  import MoreVertIcon from &quot;@material-ui/icons/MoreVert&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      maxWidth: 345,
    },
    media: {
      height: 0,
      paddingTop: &quot;56.25%&quot;, // 16:9
    },
    expand: {
      transform: &quot;rotate(0deg)&quot;,
      marginLeft: &quot;auto&quot;,
      transition: theme.transitions.create(&quot;transform&quot;, {
        duration: theme.transitions.duration.shortest,
      }),
    },
    expandOpen: {
      transform: &quot;rotate(180deg)&quot;,
    },
    avatar: {
      backgroundColor: red[500],
    },
  }));
  
  export default function RecipeReviewCard() {
    const classes = useStyles();
    const [expanded, setExpanded] = React.useState(false);
  
    const handleExpandClick = () =&gt; {
      setExpanded(!expanded);
    };
  
    return (
      &lt;div&gt;
  
        &lt;Card className={classes.root}&gt;
          &lt;CardHeader
            avatar={
              &lt;Avatar aria-label=&quot;recipe&quot; className={classes.avatar}&gt;
                R
              &lt;/Avatar&gt;
            }
            action={
              &lt;IconButton aria-label=&quot;settings&quot;&gt;
                &lt;MoreVertIcon /&gt;
              &lt;/IconButton&gt;
            }
            title=&quot;Shrimp and Chorizo Paella&quot;
            subheader=&quot;September 14, 2016&quot;
          /&gt;
          &lt;CardMedia
            className={classes.media}
            image=&quot;/static/images/cards/paella.jpg&quot;
            title=&quot;Paella dish&quot;
          /&gt;
          &lt;CardContent&gt;
            &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; component=&quot;p&quot;&gt;
              This impressive...like.
            &lt;/Typography&gt;
          &lt;/CardContent&gt;
          &lt;CardActions disableSpacing&gt;
            &lt;IconButton aria-label=&quot;add to favorites&quot;&gt;
              &lt;FavoriteIcon /&gt;
            &lt;/IconButton&gt;
            &lt;IconButton aria-label=&quot;share&quot;&gt;
              &lt;ShareIcon /&gt;
            &lt;/IconButton&gt;
            &lt;IconButton
              className={clsx(classes.expand, {
                [classes.expandOpen]: expanded,
              })}
              onClick={handleExpandClick}
              aria-expanded={expanded}
              aria-label=&quot;show more&quot;
            &gt;
              &lt;ExpandMoreIcon /&gt;
            &lt;/IconButton&gt;
          &lt;/CardActions&gt;
          &lt;Collapse in={expanded} timeout=&quot;auto&quot; unmountOnExit&gt;
            &lt;CardContent&gt;
              &lt;Typography paragraph&gt;Method:&lt;/Typography&gt;
              &lt;Typography paragraph&gt;
                Heat 1/2 cup...10 minutes.
              &lt;/Typography&gt;
              &lt;Typography paragraph&gt;
                Heat oil...bring to a boil.
              &lt;/Typography&gt;
              &lt;Typography paragraph&gt;
                Add rice and ...don’t
                open.)
              &lt;/Typography&gt;
              &lt;Typography&gt;
                Set aside off of the heat to let rest for 10 minutes, and then
                serve.
              &lt;/Typography&gt;
            &lt;/CardContent&gt;
          &lt;/Collapse&gt;
        &lt;/Card&gt;
  
        &lt;Card className={classes.root}&gt;
          &lt;CardHeader
            avatar={
              &lt;Avatar aria-label=&quot;recipe&quot; className={classes.avatar}&gt;
                R
              &lt;/Avatar&gt;
            }
            action={
              &lt;IconButton aria-label=&quot;settings&quot;&gt;
                &lt;MoreVertIcon /&gt;
              &lt;/IconButton&gt;
            }
            title=&quot;Shrimp and Chorizo Paella&quot;
            subheader=&quot;September 14, 2016&quot;
          /&gt;
          &lt;CardMedia
            className={classes.media}
            image=&quot;/static/images/cards/paella.jpg&quot;
            title=&quot;Paella dish&quot;
          /&gt;
          &lt;CardContent&gt;
            &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; component=&quot;p&quot;&gt;
              This impressive ... like.
            &lt;/Typography&gt;
          &lt;/CardContent&gt;
          &lt;CardActions disableSpacing&gt;
            &lt;IconButton aria-label=&quot;add to favorites&quot;&gt;
              &lt;FavoriteIcon /&gt;
            &lt;/IconButton&gt;
            &lt;IconButton aria-label=&quot;share&quot;&gt;
              &lt;ShareIcon /&gt;
            &lt;/IconButton&gt;
            &lt;IconButton
              className={clsx(classes.expand, {
                [classes.expandOpen]: expanded,
              })}
              onClick={handleExpandClick}
              aria-expanded={expanded}
              aria-label=&quot;show more&quot;
            &gt;
              &lt;ExpandMoreIcon /&gt;
            &lt;/IconButton&gt;
          &lt;/CardActions&gt;
          &lt;Collapse in={expanded} timeout=&quot;auto&quot; unmountOnExit&gt;
            &lt;CardContent&gt;
              &lt;Typography paragraph&gt;Method:&lt;/Typography&gt;
              &lt;Typography paragraph&gt;
                Heat 1/2 cup...10 minutes.
              &lt;/Typography&gt;
              &lt;Typography paragraph&gt;
                Heat oil ... to a boil.
              &lt;/Typography&gt;
              &lt;Typography paragraph&gt;
                Add rice...that don’t
                open.)
              &lt;/Typography&gt;
              &lt;Typography&gt;
                Set aside off of the heat to let rest for 10 minutes, and then
                serve.
              &lt;/Typography&gt;
            &lt;/CardContent&gt;
          &lt;/Collapse&gt;
        &lt;/Card&gt;
        
      &lt;/div&gt;
    );
  }
  </code></pre>