如何解决前端开发中网页右侧持续出现多余空白的问题

• 最外层容器使用了Bootstrap原生的container类，该类默认自带固定最大宽度、左右内边距和水平居中的自动外边距，本身设计就不是用于铺满全屏宽度的场景
• html和body设置了width: 100vw，Windows平台下100vw会计入滚动条宽度，哪怕设置了overflow: hidden，部分浏览器仍会出现横向尺寸溢出的问题
• 若没有显式清除浏览器默认样式，body元素自带的8px左右默认外边距也会导致内容偏移产生侧边空白

1. 将HTML中最外层容器的container类替换为container-fluid，Bootstrap的container-fluid是默认100%宽度、适配父容器尺寸的全屏容器类
2. 修改html和body的CSS配置，把width: 100vw替换为width: 100%，同时显式清除默认内外边距：

html,
body {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

3. 如果不需要Bootstrap栅格系统自带的槽距，可给所有row元素添加g-0类，消除row的默认负边距和col的默认内边距，避免多余间距：

<div class="row g-0 navbar">
<!-- 其余row元素同理添加g-0类即可 -->

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