为什么我的 Gatsby/Material-UI 网站渲染得比视口稍大？

Question

我正在使用 Gatsby/MUI starter 作为我个人网站的样板。在我的个人网站中，我遇到的问题是所有页面都呈现为略大于视口大小。此问题在移动设备和 laptop/desktop 大小的屏幕上是一致的。

我正在使用 MUI 网格。我已确保我的元视口头部元素使用 width=device-width。据我所知，这不依赖于固定大小的元素或网格间距选项，例如边距或填充。

是否有人有任何调试建议或有人希望看到有助于调试过程的特定信息？网站位于 https://errcsool.com

My code is available here

更新：如果我删除了除索引之外的所有页面，只要我将某些内容放入具有间距选项的 MUI 中，就会出现此问题 <Grid container spacing={x}>

Answer 1

已解决。添加具有 padding 至少一半间距像素的根 div 元素，因此对于 spacing={8}，根 div 应该具有 padding={32}.

This is well-known functionality of Material-UI Grid.

与相关。