Centering content containers in 4k resolution using material-ui

Solution for Centering content containers in 4k resolution using material-ui
is Given Below:

I am using Material-ui Grid component to layout the content. Initially, I have 1 column for headings and 10 columns for its containers boxes. The problem I am facing is that I am unable to center the headings and rest of the containers. Also, I wanted to make sure that the headings and the rest of the containers remain centered even when the resolution is 4k.
Below is my code.

import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles'


const useStyles = makeStyles((theme) => ({
  bg: {
    backgroundColor:  "black",
    padding: theme.spacing(1),
    height: "100%",
    overflow: "auto",
  },
  groupLocation: {
    marginBottom: "2rem"
  },
  groupLocationTitle: {
    color: '#b89c7f',
    writingMode: 'vertical-rl', 
    textOrientation: 'upright',
    textTransform: 'uppercase',
    marginLeft: '1.5rem',
    padding: '10px',
    border: '2px solid  #64FFDA',
    borderRadius: '5px',
    '@media only screen and (min-width: 2000px)': {
      fontSize: '2.8rem'
    }
  },
}))

const headingOne = [];
const headingTwo = [];
const headingThree = [];
const headingFour = [];
const headingFive = [];


for (let index = 0; index < 20; index++) {
  headingOne.push(index)
  headingTwo.push(index);
  headingThree.push(index);
  headingFour.push(index);
  headingFive.push(index);
}


function App() {
  const classes = useStyles();
  return (
    <main className={classes.bg}>
      <CssBaseline />
        <Grid container alignItems="flex-start" justify="center" className={classes.groupLocation}>
          <Grid item xs={1}>
            <Typography component="h2" variant="h4" className={classes.groupLocationTitle} gutterBottom>
              Heading 1
            </Typography>
          </Grid>
          <Grid item container xs={10} spacing={1} justify="flex-start">
            {headingOne.length && headingOne.map(data => (
              <Grid item>
                <div style={{ height: "70px", width: "442px", border: "1px solid #64FFDA", backgroundColor: "#2b2b2b" }}></div>
              </Grid>
            ))}
          </Grid>
        </Grid>

        <Grid container alignItems="flex-start" justify="center" className={classes.groupLocation}>
          <Grid item xs={1}>
            <Typography component="h2" variant="h4" className={classes.groupLocationTitle} gutterBottom>
            Heading 2
            </Typography>
          </Grid>
          <Grid item container xs={10} spacing={1} justify="flex-start">
            {headingTwo.length && headingTwo.map(data => (
              <Grid item>
                <div style={{ height: "70px", width: "442px", border: "1px solid #64FFDA", backgroundColor: "#2b2b2b" }}></div>
              </Grid>
            ))}
          </Grid>
        </Grid>

        <Grid container alignItems="flex-start" justify="center" className={classes.groupLocation}>
          <Grid item xs={1}>
            <Typography component="h2" variant="h4" className={classes.groupLocationTitle} gutterBottom>
            Heading 3
            </Typography>
          </Grid>
          <Grid item container xs={10} spacing={1} justify="flex-start">
            {headingThree.length && headingThree.map(data => (
              <Grid item>
                <div style={{ height: "70px", width: "442px", border: "1px solid #64FFDA", backgroundColor: "#2b2b2b" }}></div>
              </Grid>
            ))}
          </Grid>
        </Grid>

        <Grid container alignItems="flex-start" justify="center" className={classes.groupLocation}>
          <Grid item xs={1}>
            <Typography component="h2" variant="h4" className={classes.groupLocationTitle} gutterBottom>
            Heading 4
            </Typography>
          </Grid>
          <Grid item container xs={10} spacing={1} justify="flex-start">
            {headingFour.length && headingFour.map(data => (
              <Grid item>
                <div style={{ height: "70px", width: "442px", border: "1px solid #64FFDA", backgroundColor: "#2b2b2b" }}></div>
              </Grid>
            ))}
          </Grid>
        </Grid>
      {headingFive &&
        <Grid container alignItems="flex-start" justify="center" className={classes.groupLocation}>
          <Grid item xs={1}>
            <Typography component="h2" variant="h4" className={classes.groupLocationTitle} gutterBottom>
            Heading 5
            </Typography>
          </Grid>
          <Grid item container xs={10} spacing={1} justify="flex-start">
            {headingFive.length && headingFive.map(data => (
              <Grid item>
                <div style={{ height: "70px", width: "442px", border: "1px solid #64FFDA", backgroundColor: "#2b2b2b" }}></div>
              </Grid>
            ))}
          </Grid>
        </Grid>
      }
    </main>
  );
}

export default App;