页面出现多余横向滚动条及内容溢出，寻求前端技术帮助

• 页面出现多余横向滚动条（x-scrollbar），截图如下：
  
• .main-content 右侧存在不明额外空白
• header 和 footer 超出设定的屏幕宽度
• background-image 无法正常显示

需求目标：

• 让header和footer不溢出屏幕范围
• 消除横向滚动条，页面仅保留纵向滚动
• 确保.main-content铺满屏幕宽度

已尝试用Chrome DevTools排查修改，但未解决问题。

一、解决横向滚动条与元素溢出 #

横向滚动条大多是元素盒模型计算异常或溢出导致，按以下步骤处理：

1. 全局重置与溢出控制
   给body添加样式，清除默认边距并强制隐藏横向溢出：

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

2. 统一盒模型计算
   给所有元素设置box-sizing: border-box，避免padding/border撑开元素宽度导致溢出：

* {
  box-sizing: border-box;
}

3. 检查header/footer宽度设置
   确保它们的width为100%，不要用固定像素值；同时避免设置左右内边距后未启用border-box，否则总宽度会超出屏幕。
4. 排查.main-content右侧空白
   用DevTools选中.main-content，查看盒模型的宽度、内边距、外边距，检查是否有子元素设置了超出父容器的宽度（比如width: 105%或超大固定值），这类子元素会撑出空白。

二、修复background-image不显示 #

1. 校验图片路径
   确认background-image: url('路径')中的路径正确，相对路径要匹配文件层级（比如图片在images文件夹下，路径应为./images/xxx.jpg）。
2. 补充必要属性
   仅设置background-image有时无法正常显示，需搭配相关属性：

.target-element {
  background-image: url('你的图片路径');
  background-size: cover; /* 或contain，根据需求选择 */
  background-repeat: no-repeat;
  background-position: center;
}

3. 检查文件有效性
   确认图片文件未损坏，格式为浏览器支持的类型（jpg、png、webp等）。

三、额外排查点 #

• 用DevTools的Elements面板逐个选中header、.main-content、footer，查看Layout面板的宽度数据，确认是否有元素总宽度超过屏幕。
• 检查是否有绝对定位的元素脱离文档流，超出容器范围导致横向溢出。

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