请求修改SCSS代码实现菜单背景全屏无间隙（含24寸及以下适配）

需求：让菜单背景宽度100%，消除左侧、右侧及顶部间隙；菜单背景色需铺满全屏，且在24英寸及以下屏幕上也保持全屏显示。现有SCSS代码设置后顶部仍存在小间隙，请求修改。

现有代码：

.header-main-wrapper {
    max-width: 1720px;
    margin: 0 auto;
    background: #1c2e52;
    @media #{$xs,$sm,$md,$lg} {
        padding: 16px 0;
    }
}

修改步骤及代码： #

1. 清除全局默认边距：页面顶部的间隙大多是html或body的默认margin/padding导致，先重置这些样式：

html, body {
  margin: 0;
  padding: 0;
}

2. 调整菜单容器样式：移除限制宽度和居中的属性，确保背景铺满全屏：

.header-main-wrapper {
  width: 100%; // 强制占满整个视口宽度
  background: #1c2e52;
  @media #{$xs,$sm,$md,$lg} {
    padding: 16px 0;
  }
}

3. 保留内部内容宽度限制（可选）：如果原本的max-width:1720px是用来控制菜单内部内容的最大宽度，建议在.header-main-wrapper内新增子容器实现内容居中，避免小屏幕下内容贴边：

.header-main-content {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 16px; // 小屏幕添加左右内边距优化体验
}

说明： #

• 移除max-width:1720px和margin:0 auto是因为这两个属性会让容器居中并限制宽度，导致背景无法全屏。
• width:100%确保容器适配所有屏幕宽度，包括24英寸及以下设备（对应1920px以内分辨率）。
• 重置html/body默认样式可彻底解决顶部间隙问题。

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