Bootstrap 5如何设置页面白色背景？解决两侧黑色背景无法修改问题

• 现有样式仅为.main容器设置了白色背景，且给该容器配置了左右各107px的外边距。外边距区域不属于.main容器的渲染范围，会直接展示上层父容器（html、body标签）的背景色。
• 项目全局默认给html/body设置了黑色背景，因此.main两侧的外边距区域会透出黑色。
• 你粘贴的CSS代码存在语法错误：.main样式的闭合大括号}写在了代码块外部，会导致这段样式无法正常生效。

1. 修正CSS语法错误，将闭合大括号放回.main的样式规则内
2. 为全局根节点设置纯白色背景，覆盖原有黑色配置
3. 根据需求调整.main的外边距：如果需要.main占满页面宽度，直接删除左右外边距配置；如果需要保留.main的居中宽度，只要根节点背景设为白色，两侧区域也会显示为白色

最终可用的CSS代码如下：

/* 全局根节点样式重置，设置纯白背景 */
html, body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  min-height: 100vh;
}

/* 修正后的.main容器样式 */
.main {
  background-color: white;
  padding: 2px;
  /* 不需要两侧留白就删除下面两行margin配置 */
  margin-left: 107px;
  margin-right: 107px;
}

注意：从你写的类名（bg-dark、container等）判断项目使用了Bootstrap框架，需要确保自定义CSS文件的引入顺序在Bootstrap样式文件之后，避免自定义样式被框架默认样式覆盖。

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