问题原因拆解 #

你遇到的水平滚动条问题主要来自两个定位/宽度设置的冲突：

1. 定位基准错误：下拉菜单的父元素.has-menu是position:relative，所以left:0是相对于这个<li>元素的位置（而非视口左边缘）。由于<li>在带有padding:0 16px的.container里，下拉菜单会从<li>的左边缘开始延伸100vw，直接导致右边缘超出视口范围，触发水平滚动。
2. 100vw的滚动条兼容性：即使你修正了定位，当页面存在垂直滚动条时，100vw会包含滚动条的宽度，导致下拉菜单比页面实际内容区域宽，也可能间接触发水平滚动。

修复方案（推荐） #

我们可以通过调整定位规则，让下拉菜单直接对齐视口边缘，同时保持它跟随导航滚动（无需使用fixed定位）：

修改下拉菜单的CSS规则，核心用calc()计算左偏移量，让它的左边缘精准对齐视口左边缘：

/* dropdown */
.menucontent-style {
  position: absolute;
  top: 100%;
  /* 关键：绕开父元素定位，让下拉菜单左边缘对齐视口左边缘 */
  left: calc(50% - 50vw);
  width: 100vw;
  padding: 30px 80px;
  display: none;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
  /* 确保padding被包含在宽度内（你已经全局设置，这里重复强调增强鲁棒性） */
  box-sizing: border-box;
}

兜底优化（可选） #

如果你的页面其他部分也可能出现意外的水平溢出，可以给根元素加上溢出隐藏，彻底避免水平滚动条出现：

html, body {
  overflow-x: hidden;
}

效果验证 #

修改后，hover"Mobile"链接时，下拉菜单会从视口左边缘开始，铺满整个视口宽度，padding被包含在100vw内（得益于box-sizing:border-box），完全不会超出视口范围，自然就不会触发水平滚动条了。

额外小优化 #

你的<ol>元素默认会有列表样式，虽然你重置了padding，但可以显式加上list-style: none让布局更干净，如果需要多个菜单项横向排列，还可以加上display: flex：

nav#nav1 ol {
  list-style: none;
  display: flex;
}