How can I centre these 2 graphs in their respective grids in Material UI?

Question

I have 2 graphs side by side. But they are not at the centre and this looks a bit awkward. The code:

   <Box  sx={{ flexGrow: 1 }} display="flex"
  justifyContent="center"
  alignItems="center" marginLeft={3} marginRight={3} mt={2.5}>
      <Grid container spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg:16}} display="flex"
  justifyContent="center"
  alignItems="center" >
  
          <Grid item xs={2} sm={4} md={4} lg={7.3} >
            <Item alignItems="center"><Nifty50/></Item>
          </Grid>

          <Grid item xs={2} sm={4} md={4} lg={7.3}>
            <Item alignItems="center"><Sensex/></Item>
          </Grid>
      
      </Grid>

    </Box>

I would like to position the graphs in the centre so the grey background is evenly distributed. Any help is appreciated.

Answer 1

You have to put all the css into the sx attribute

  <Box  sx={{ flexGrow: 1, display: "flex", justifyContent: "center", alignItems: "center", marginLeft: 3, marginRight: 3, marginTop: 2.5 }}>
      <Grid container spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg:16}} sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
  
          <Grid item xs={2} sm={4} md={4} lg={7.3} >
            <Item alignItems="center"><Nifty50/></Item>
          </Grid>

          <Grid item xs={2} sm={4} md={4} lg={7.3}>
            <Item alignItems="center"><Sensex/></Item>
          </Grid>
      
      </Grid>

    </Box>