Grid Items aren't beside eachother Material UI

I am using the Grid component in material-ui. I am having trouble having the grid items stack beside each other. Right now they are stacking below each other. I am not sure what is making them stack below each other. I have made it so only on small screens the grid items will stack on top of each other, other wise each grid item should take up 4 columns. I am using react for the front-end. Here is my code:

GridItem:

   const styles = theme => ({

  image: {
    maxWidth: "100%",
    maxHeight: "100%"
  },


});
render() {
    const { post, auth, classes } = this.props;
<div className={classes.root}>
        <Link to={`/post/${post._id}`}>
          <Grid
            item
            key={post.key}
            sm={12}
            md={4}
            lg={4}

          >
            <img src={post.productImage} className={classes.image} />
            <Typography>
              {post.name}
              <br />
              {post.size}
            </Typography>

          </Grid>
        </Link>
      </div>

PostFeed:

 render() {
    const { posts } = this.props;

    return posts.map(post => <ListingPost key={post._id} post={post} />);
  }
}

Grid: const styles = theme => ({

  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper,
    margin: 0
  },

  grid: {
    margin: "auto",
    width: "80%",
    display: "inner-block"
  },
  paper: {
    margin: "1%",
    padding: "1%",
    width: "80%"
  },

});
render() {
    const { classes } = this.props;
    const { posts, loading } = this.props.post;
    let postContent;

    if (posts === null || loading) {
      postContent = <div> loading</div>;
    } else {
      postContent = <PostFeed posts={posts} />;
    }

    return (
      <div className={classes.root}>
        <Paper className={classes.paper}>
          <Typography align="center" variant="display2">
           Listings
          </Typography>
          <Grid container className={classes.grid} spacing={16}>
            {postContent}
          </Grid>
        </Paper>
      </div>
    );
  }
}