如何设置与margin: auto等效的padding实现导航内容与容器对齐？

这里提供两种可直接落地的方案，都能同时满足「阴影铺满视口」和「内容区域和外层容器对齐」的需求：

方案1：CSS变量同步配置（推荐，易维护） #

先给外层容器新增CSS变量存储padding值，方便后续统一修改：

/* 外层容器CSS */
padding: 80px;
margin-left: auto; 
margin-right: auto;
--container-horizontal-padding: 80px;

然后给导航栏补充左右内边距的计算规则即可：

/* 导航栏CSS */
display: flex;
box-shadow: 0px 10px 8px -8px #00000024;
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
/* 新增规则 */
padding-inline: calc(var(--container-horizontal-padding) + max(0px, (100vw - 100%) / 2));

规则说明：

• (100vw - 100%) / 2 就是外层容器左右自动边距的实际值
• 加上容器自身的水平padding，刚好就是导航栏需要的左右内边距，完全对齐内容区域
• max(0px, ...) 用于避免视口宽度小于容器宽度时出现负内边距异常

方案2：硬编码值（适合固定配置场景） #

如果不需要动态调整容器padding，也可以直接写死数值，不需要改外层容器代码：

/* 导航栏CSS */
display: flex;
box-shadow: 0px 10px 8px -8px #00000024;
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
/* 新增规则 */
padding-inline: calc(80px + max(0px, (100vw - 100%) / 2));

注意事项 #

需要给页面根元素添加如下规则，避免出现横向滚动条：

body {
  margin: 0;
  overflow-x: hidden;
}

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