Вложенные элементы сетки, не центрированные в сетке пользовательского интерфейса материала

#javascript #reactjs #material-ui

Вопрос:

Я использую сетку пользовательского интерфейса вложенного материала для отображения своих компонентов react. Проблема в том, что у меня есть две карточки под названием «Практика» и «среднее» внутри вложенной сетки, но они не отображаются в центре сетки. Я установил свойства alignItems и justfiy в центр, но они не работают. Вот пример кода

 
 <Grid container spacing={2} justify="center" alignContent="center">
          <Grid item sm={6} xs={12}>
            <Paper className={classes.paper}>
              <h2>Paractice DOJO</h2>
            </Paper>{" "}
          </Grid>
          <Grid item sm={6} xs={12}>
            <Paper className={classes.paper}>
              {" "}
              <h2>Paractice </h2>
//not centring these cards
              <Grid
                container
                item
                spacing={2}
                justify="center"
                alignContent="center"
              >
                <Grid item xs={12} lg={6}>
                  <ParacticeCards />
                </Grid>
                <Grid item xs={12} lg={6}>
                  <Average avg />
                </Grid>
              </Grid>
            </Paper>
          </Grid>
        </Grid>