flex容器元素未居中、width:100vw设置下容器超宽问题排查

你碰到的元素对齐偏移、容器宽度超出屏幕、左右留白不一致的问题，核心出在width: 100vw这个属性上：

• 浏览器对100vw的计算逻辑是包含垂直滚动条宽度的整个视口宽度，而非页面实际可用的内容区域宽度
• 当页面内容高度超过一屏、触发垂直滚动条时，100vw的实际渲染宽度会比可用内容区多一个滚动条的宽度（桌面端通常15px左右，移动端视口更窄，滚动条宽度占比更高），直接导致容器横向溢出屏幕，出现你看到的左侧留白大于右侧的偏移问题
• 你测试时把内部header、列表元素全部隐藏问题仍存在，刚好能印证这个结论——溢出是容器本身的宽度设置导致的，和子元素无关

只需要调整PortfolioContainer的宽度属性即可，其他flex、grid布局代码不需要改动：

• 删除原有width: 100vw设置：块级div默认就会自动占满父级可用宽度，不会把滚动条宽度算进去
• 如果要显式声明宽度，用width: 100%替代100vw，100%是基于父元素内容区宽度计算，会自动扣除滚动条占位
• 可选加overflow-x: hidden做兜底，避免其他意外的横向溢出
• 建议全局配置box-sizing: border-box，避免padding、border额外撑宽元素引发溢出

修改PortfolioContainer样式：

export const PortfolioContainer = styled.div`
    min-height: 100vh;
    width: 100%; // 替换原有的100vw
    padding-top: 110px;
    overflow-x: hidden; // 横向溢出兜底
    box-sizing: border-box;
`

全局样式建议加统一重置：

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

改完刷新页面，横向溢出会直接消失，居中对齐的列表元素左右留白会完全对称，移动端偏移问题也会同步解决。

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