javascript - マテリアル UI グリッド システムからパディングを削除

Question

あなたの一日がうまくいくことを願っています。私はマテリアル UI の新しいユーザーで、最初のプロファイル ページ (下の画像) の作成に取り組んでいます。

このページの作成に近づいているため、about セクションを 3 つのパネルのすぐ下に配置できるグリッド システムの作成に苦労しています (下の画像を参照)。

about セクションと 3 つのパネル (以下のコード) の間のパディングを削除するにはどうすればよいですか?

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>

    </>
  );
};