如何将 header 的宽度扩展到整个屏幕?

How do I extend the width of the header to the whole screen?

问题:

header 周围有一个白色边框。如何将 header 扩展到浏览器的边缘?

我试过的:

我已经尝试将 width={1} 添加到 makeStyles<Box> 组件中。都没有解决问题。有趣的是,AppBar 延伸到了浏览器的末端。

关于如何扩展 header 和移除 header 周围的白色边框有什么想法吗?为了清楚起见,我在下面添加了一张图片。谢谢。

Code base

正文周围有8px的边距。 删除该边距即可解决问题。

工作演示:https://codesandbox.io/s/quiet-wave-4t9vn

html,
body {
  margin: 0;
  /*optional css below*/
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}