React Material-UI not justify-content не будет работать для всех моих карт

У меня действительно странная проблема с моим кодом. Я использую React для отображения состояния Redux на карты Material-UI. На днях, когда я тестировал разные стили на своих картах, я мог создавать разные классы и обновлять внешний вид карт, как мне нравилось. Однако сегодня, когда я добавил новую информацию в свою базу данных, новые карты не будут брать весь стиль из базы данных Material-UI. В частности, кажется, что новые карты не затронуты justifyContent.

Мне сложно объяснить эту проблему, но в основном у меня есть база данных, содержащая информацию, отображаемую на нескольких разных картах. Некоторые карты принимают стиль Material-UI, другие карты - нет.

Я хотел бы опубликовать jsfiddle, но мне нужно было бы связать его с моей базой данных, и я не уверен, что это можно сделать.

Вот страница, которая отображает мое состояние редукции:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ProjectItem from '../ProjectItem/ProjectItem'
import {withRouter} from 'react-router-dom'
import Header from '../Header/Header'
import { withStyles } from '@material-ui/core';

const mapReduxStateToProps = (reduxState) => ({reduxState});

const styles = theme => ({
    bodyContent: {
        marginTop: 100,
    }
})

class ProjectPage extends Component {

    //This calls the getProjects function on the page load
    componentDidMount() {
        this.getProjects();
    }

    //This function dispatches an action to our index page
    getProjects = () => {
        console.info('running')
        this.props.dispatch({ type: 'GET_PROJECT'})
    }

  render() {
    const {classes} = this.props
    return (
      <div>
          <Header />
          <div className= {classes.bodyContent}>
        {this.props.reduxState.projects.map((project,index) => {
            return(

                <ProjectItem 
                    key = {index}
                    id = {project.id}
                    name  = {project.name}
                    description = {project.description}
                    thumbnail = {project.thumbnail}
                    website = {project.website}
                    github = {project.github}
                    tag_id = {project.tag_id}
                />

            )
        })}
        </div>
      </div>
    );
  }
}

export default withRouter(connect(mapReduxStateToProps)(withStyles(styles)(ProjectPage)));

А вот и страница с моей стилизацией.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './ProjectItem.css'
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia'
import CardContent from '@material-ui/core/CardContent'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core';

const mapReduxStateToProps = (reduxState) => ({reduxState});

const styles = theme => ({
    card: {
        display: 'flex',
        width: 550,
        alignSelf: 'center',
        height: 150,
        paddingTop: 5,
        paddingBottom:5,

    },
    details: {
        display: 'flex',
        flexDirection: 'column'
    },
    thumbnail: {
        height: 150,
        minWidth: 150
    },
    contentBody: {
        justifyContent: 'space-between',
        textAlign: 'left',
        alignItems: 'center',
        display : 'inline-flex',
    },
    toolbar: theme.mixins.toolbar
})
class ProjectItem extends Component {



  render() {
      const {classes} = this.props
    return (
        <div className='container'>
          <Card className = {classes.card}>
              <CardMedia
                  className = {classes.thumbnail}
                  image = {this.props.thumbnail}
                  title = "Project Image"
              />
              <div className = {classes.details}>
                  <CardContent className = {classes.contentBody}>
                      <Typography variant='h5'>
                        {this.props.name} 
                      </Typography>
                      <Typography variant='h6'>
                        <a href = {this.props.github}>GitHub</a>  
                      </Typography>
                      <Typography variant='h6'>
                        <a href = {this.props.website}>Website</a>
                      </Typography>
                      <Typography variant='h6'>
                        {this.props.tag_id}
                      </Typography>
                  </CardContent>
                  <CardContent className = {classes.content}>    
                      <Typography>
                          {this.props.description}
                      </Typography>
                  </CardContent>
              </div>
          </Card>
          </div>
    );
  }
}

export default connect(mapReduxStateToProps)(withStyles(styles)(ProjectItem));