已设width:100%，导航与Footer仍超出视口宽度问题求助

云上老周

2026-7-8

问题解决：Flex布局justify-content: space-between导致右侧元素溢出视口

核心问题分析

你的header设置了width: 100%同时添加了左右padding，但未配置box-sizing: border-box，此时元素总宽度会是100% + 左右padding，超出视口宽度，直接导致右侧导航部分被挤出。另外footer当前用的是justify-content: center，若改为space-between也会触发相同的宽度计算问题。

解决方案步骤

1. 全局统一盒模型（优先推荐）

在CSS最顶部添加全局样式，从根源避免所有元素因padding/border导致的宽度溢出：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 单独修正header样式

如果不想全局修改，至少给main-navigation添加盒模型配置：

.main-navigation {
    display: flex;
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    justify-content: space-between;
    padding: 30px 60px;
    width: 100%;
    box-sizing: border-box; /* 新增 */
}

3. 调整footer布局（若需`space-between`）

如果希望footer的两个div也用space-between对齐，修改如下：

#footer {
    display: flex;
    width: 100%;
    padding: 0.9375rem 1.25rem;
    position: fixed;
    bottom: 0;
    justify-content: space-between; /* 替换原center */
    align-items: center;
    box-sizing: border-box;
}

4. 优化导航项宽度（可选）

.nav-item的固定宽度8.64583rem可能导致导航列表在小屏幕上溢出，建议移除固定宽度，用padding保证点击区域：

.nav-item {
    display: flex;
    /* width: 8.64583rem; 移除固定宽度 */
    height: 1.3125rem;
    justify-content: center;
    align-items: center;
    padding: 0 1rem; /* 用padding替代固定宽度 */
}