Reactjs 如何去除网格中的尾随空间

我有一个网格，在那里我显示了许多卡片。我已经指定网格的宽度为100%，因此使用整个区域。但当我看到它时，似乎还有一点剩余空间。我怎样才能摆脱它

守则：

const useStyles = makeStyles((theme) => ({
  title: {
    marginLeft: theme.spacing(2)
  },
  main: {
    width: '100%'
  }
}))

function App() {
  const classes = useStyles();

  return (
    <div>
      <AppBar color="primary" position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.menu}>
            Duncc Blogs
          </Typography>
        </Toolbar>
      </AppBar>
      <Grid className={classes.main} container direction="column" spacing={3}>
        <Grid container direction="row">
          <Grid item xs={0} md={1}/>
          <Grid item xs={12} md={10}>
            <LatestCard />
          </Grid>
          <Grid item xs={0} md={1}/>
        </Grid>
        
        <Grid container direction="row" spacing={2} wrap="nowrap">
          
          <Grid container direction="column" xs={1} md={2}></Grid>

          <Grid container direction="row" spacing={3}>
            <Grid item xs={12} sm={6} md={6}>
              <NormalCard title="Day 4" body={day4Body} date="Apr 13, 2021"/>
            </Grid>
            <Grid item={12} sm={6} md={6}>
              <NormalCard title="Day 3" body={day3Body} date="Apr 12, 2021"/>
            </Grid>
            <Grid item={12} sm={6} md={6}>
              <NormalCard title="Day 2" body={day2Body} date="Apr 11, 2021"/>
            </Grid>
            <Grid item={12} sm={6} md={6}>
              <NormalCard title="Day 1" body={day1Body} date="Apr 10, 2021"/>
            </Grid>
          </Grid>

          <Grid container direction="column" xs={1} md={2}></Grid>
          
        </Grid>
        
      </Grid>
    </div>
  );
}

const useStyles=makeStyles（（主题）=>({
标题：{
marginLeft：主题。间距（2）
},
主要内容：{
宽度：“100%”
}
}))
函数App（）{
const classes=useStyles（）；
返回(