设置max-width后导航栏左移，拉伸页面时如何保持导航栏内容居中？

算力阿峰

2026-10-15

解决方案

直接修改两处CSS即可实现你要的Instagram同款导航栏效果：
sticky定位的元素默认不会继承普通块级元素的水平居中规则，需要显式声明left和right为0，配合margin: 0 auto才能在设置max-width后正常居中。

给外层通栏容器.container补全宽度规则，保证底部边框占满整个视口
给sticky定位的.header添加左右定位规则，修复max-width下的居中失效问题

修改后的完整CSS代码

.container {
  border-bottom: 1px solid lightgray;
  width: 100%; /* 新增：保证容器通栏 */
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 可选修改：替换space-around，更贴合Ins导航左右贴边的布局，不需要可保留原配置 */
  padding: 20px;
  position: sticky;
  top: 0;
  left: 0; /* 新增：sticky定位下的左边界声明 */
  right: 0; /* 新增：和left配合实现水平居中 */
  z-index: 100;
  background-color: white;
  max-width: 800px;
  margin: 0 auto; /* 优化：明确仅做水平方向居中 */
}

/* 其余代码保持不变即可 */
.header__left {
  align-items: center;
}

.header__left__link {
  text-decoration: none;
}

.header__left__logo {
  color: black;
  font-family: "Kirang Haerang";
  font-size: 30px;
  letter-spacing: 1px;
}

.header__mid {
  display: flex;
  align-items: center;
}

.header__right {
  display: flex;
  align-items: center;
}

.header__right__login {
  font-size: 20px;
  margin-right: 10px;
}

.header__right__logout {
  font-size: 20px;
}