如何让HTML标签占满全屏 消除横向滚动条并让导航栏撑满宽度

• 修复CSS语法错误
  你提供的CSS代码中，第二个body样式规则结束后多了一个多余的闭合大括号}，该语法错误会导致后续的CSS规则加载异常，部分样式不生效，请先删除这个多余的大括号。
• 补充视口元标签
  如果删除所有CSS后仍然存在页面留白和横向滚动条，是因为HTML头部没有配置正确的视口规则，在<head>标签内添加如下代码即可：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  该标签会强制页面宽度匹配设备屏幕宽度，避免默认缩放导致的溢出问题。另外浏览器自带默认样式会给body设置8px的外边距，完全删除自定义CSS时这个边距会生效出现留白，属于正常现象，你的代码中已经配置了body {margin: 0}，CSS正常加载时会覆盖该默认样式。
• 排查导航栏宽度限制
  你的navbar-custom类没有设置宽度规则，如果你使用的是Bootstrap这类框架的导航栏，注意不要将导航栏放在带container、container-sm等固定宽度的容器类内部，这类容器自带左右内边距和最大宽度限制，会导致导航栏无法撑满屏幕。需要全屏导航栏的话，要把导航栏结构放在容器外部，内部导航内容再单独套容器控制宽度即可。
• 定位溢出元素
  你已经给全局配置了box-sizing: border-box，如果还有横向滚动条，大概率是某个子元素宽度超出了视口范围，可以临时添加如下代码快速定位溢出元素：

  * {
    outline: 1px solid red;
  }
  

  该规则会给所有元素添加红色边框，可以快速识别出超出屏幕宽度的元素。
• 可选全局横向溢出控制
  确认页面不需要横向滚动的话，可以给根元素添加溢出隐藏规则，直接屏蔽横向滚动条：

  html, body {
    overflow-x: hidden;
  }
  

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