Remove Padding From Material UI Grid System

Question

I hope your day is going well. I am a new user of material UI and I am working on building my first profile page (image below).

As I am getting closer to building this page, I am struggling to create a grid system that allows the about section to be directly under the three panels (see image below).

How do I remove the padding between the about section and three pannels (code below)?

return (
    <>
      <Helmet>
        <title>Dashboard: Project Details | Material Kit Pro</title>
      </Helmet>
      <Box
        sx={{
          backgroundColor: 'background.default',
          minHeight: '100%',
          py: 8
        }}
      >
        <Container >
          <AppBar></AppBar>
          <Grid container spacing={1}>
            <Grid item xs={12} md={3}>
              <Box
                style={{ height: '100%', width: '100%'}}
              >
                <WritersSidePanel />
              </Box>
            </Grid>
            <Grid item xs={12} md={9}>
              <WritersPageTopPanel />
            </Grid>
              <Box style={{ marginDown: '90%'}}>
                <Grid item xs={12} container
                      direction="column"
                      alignItems="flex-end"
                      justify="flex-end">
                <Box
                  style={{ width: '75%', height: '100%'}}
                >
                  <AboutSection description={description} />
                  </Box>
                </Grid>
              <Grid item xs={12} container
                    direction="column"
                    alignItems="flex-end"
                    justify="flex-end">
                <Box
                  style={{ width: '75%'}}
                >
                  <SampleStory description={description} />
                </Box>
              </Grid>
            </Box>
          </Grid>
        </Container>
      </Box>

    </>
  );
};