React应用Footer无法占满100%宽度，左右留白问题求助

问题出在浏览器默认的全局样式：<body>标签自带默认margin（通常为8px），导致最外层.App容器无法完全贴合视口左右边缘，进而Footer出现留白。

修复步骤： #

1. 重置<html>和<body>的默认边距，确保它们占满视口宽度
2. 显式设置.App和.footer的宽度为100%（避免潜在的宽度继承问题）

修改后的CSS代码：

/* 全局重置默认样式 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer {
  margin-top: auto;
  background-color: #000;
  color: #fff;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  padding: 25px 0;
  width: 100%;
}

补充说明： #

如果不想全局重置，也可以单独给.App添加margin: -8px抵消body的默认边距，但全局重置是更规范的做法，能避免后续其他组件出现类似留白问题。

内容的提问来源于stack exchange，提问作者Devmix