页面右侧出现多余边距，求CSS修改方案（Web开发新手求助）

• 先重置全局基础样式，直接禁止横向滚动并清除默认边距：

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

• 修复hero元素的盒模型问题，避免宽度溢出：

.hero {
  position: relative; /* 保持原定位，不要改成fixed */
  width: 100%;
  box-sizing: border-box; /* 让padding、border包含在宽度内，不会超出父容器 */
  /* 保留你原来的背景、高度等样式 */
}

• 检查页面内其他元素，比如有没有子元素设置了width: 100vw（视口宽度），或者绝对定位元素的right值没设对导致超出视口，这类情况直接调整对应元素的宽度或定位参数。

• 如果hero是页眉，需要让下方内容不被覆盖，给内容容器加顶部内边距：

/* 替换成你实际的内容容器类名 */
.main-content {
  padding-top: 70px; /* 值等于hero的实际高度，根据你的页面调整 */
}

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