title: Grid Items aren't beside eachother Material UI
body: <p>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:</p>
  
  <p>GridItem:</p>
  
  <pre><code>   const styles = theme =&gt; ({
  
    image: {
      maxWidth: "100%",
      maxHeight: "100%"
    },
  
  
  });
  render() {
      const { post, auth, classes } = this.props;
  &lt;div className={classes.root}&gt;
          &lt;Link to={`/post/${post._id}`}&gt;
            &lt;Grid
              item
              key={post.key}
              sm={12}
              md={4}
              lg={4}
  
            &gt;
              &lt;img src={post.productImage} className={classes.image} /&gt;
              &lt;Typography&gt;
                {post.name}
                &lt;br /&gt;
                {post.size}
              &lt;/Typography&gt;
  
            &lt;/Grid&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>PostFeed:</p>
  
  <pre><code> render() {
      const { posts } = this.props;
  
      return posts.map(post =&gt; &lt;ListingPost key={post._id} post={post} /&gt;);
    }
  }
  </code></pre>
  
  <p>Grid:
  const styles = theme => ({</p>
  
  <pre><code>  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 = &lt;div&gt; loading&lt;/div&gt;;
      } else {
        postContent = &lt;PostFeed posts={posts} /&gt;;
      }
  
      return (
        &lt;div className={classes.root}&gt;
          &lt;Paper className={classes.paper}&gt;
            &lt;Typography align="center" variant="display2"&gt;
             Listings
            &lt;/Typography&gt;
            &lt;Grid container className={classes.grid} spacing={16}&gt;
              {postContent}
            &lt;/Grid&gt;
          &lt;/Paper&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>