javascript - 从 Material UI Grid System 中移除填充

Question

我希望你的一天一切顺利。我是 Material UI 的新用户，我正在构建我的第一个个人资料页面（下图）。

随着我越来越接近构建此页面，我正在努力创建一个网格系统，该系统允许 about 部分直接位于三个面板下方（见下图）。

如何删除 about 部分和三个面板之间的填充（下面的代码）？

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>

    </>
  );
};