PAYATHON 2026

CSS 中固定定位的 header 为什么偏右且未与 hero 对齐？

数据阿明

结论

.header 偏移的主要原因是同时设置了 width: 100% 和左右各 6.25rem 的外边距。固定定位元素的 width: 100% 通常按视口宽度计算，外边距会继续占用空间，导致总宽度超过可用宽度，容易出现横向溢出或视觉上未居中的情况。

.header 使用了 position: fixed，因此会脱离普通文档流。body { max-width: 1440px; margin: auto; } 不会自动限制它的宽度。.hero-image 的 top: 4.5rem 只会让图片向下移动，不会把 header 向右推。

调整 header 的宽度和定位

如果希望导航栏在视口中居中，同时保留两侧各 6.25rem 的间距，可以移除 .header 的左右外边距，用 left: 50% 和 transform 实现居中：

.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(calc(100vw - 12.5rem), 1240px);
  margin: 0;
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  background-color: #f7f3e3;
  transition: top 0.3s;
  z-index: 100;
}

.header-jmeno {
  flex: 1;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

12.5rem 是两侧间距的总和。1240px 则是页面宽度 1440px 减去两侧各 100px（6.25rem）后的内容宽度。若想让导航栏更靠近视口边缘，可以适当减小两侧间距。窄屏下还需要通过媒体查询调整宽度、内边距和菜单间距，避免导航内容拥挤。

让 hero 图片和导航栏使用相同的对齐基准

.hero-image 设置了 max-width: 100%，图片最多占据父容器的宽度；而 header 的固定定位不受 body 最大宽度的自动约束。建议为页面内容和 header 设置一致的宽度规则。如果希望 hero 图片与 header 边缘对齐，可以将图片放入相同宽度的容器，或为图片设置与 header 相同的宽度和居中方式。

例如，让图片保持在主体宽度内，并以块级元素显示：

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  top: 4.5rem;
}

这种写法假设 hero 区域没有额外的左右内边距。如果 header 保留两侧缩进，而图片铺满整个主体区域，两者的左右边缘就不会对齐。可以根据设计决定是否对齐边缘，或让图片铺满主体区域。

额外检查

HTML 中的 id 属性不应包含 #。例如，当前的 id="#portfolio" 与链接 href="#portfolio" 不匹配，应改为 id="portfolio"；o-mne 和 kontakt 也同样处理。这个问题不会导致 header 偏右，但会影响导航链接跳转。

备注：内容仅供参考。