设置h1的margin-left实现左对齐时整个页面右移如何解决

• 你页面中.colors、.fonts两个容器已经设置了margin: 0 50px，左侧距离页面边缘固定为50px，而h1未设置左边距，默认继承浏览器自带的body默认边距（通常为8px），所以二者无法对齐。
• 仅修改h1样式却导致整个页面右移，大概率是两个问题导致：
  1. 你的HTML代码中h1标签未正确闭合，原代码写为<h1>Webste Design System<h1>，结尾缺少斜杠，浏览器会误将后续所有元素识别为h1的子元素，此时给h1设置margin会连带所有子元素一起偏移。
  2. 你设置的h1左边距数值过大，加上h1本身的宽度超出当前视口宽度，触发横向滚动条，视觉上呈现整个页面右移的效果。

快速修复方案 #

先修复h1标签的闭合问题，将h1代码改为：

<h1>Webste Design System</h1>

再给h1的CSS规则添加和下方容器一致的左边距即可对齐：

h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-left: 50px;
}

更优的全局布局方案 #

如果后续还要添加更多模块，推荐用统一包裹容器实现全局对齐，无需给每个元素单独设置边距，维护性更高：

1. 在body内新增一层全局容器包裹所有内容：

<body>
  <div class="container">
    <!-- 原来的h1、colors、fonts等所有内容都放到这里 -->
  </div>
</body>

2. 添加容器的CSS规则，同时删除原来给.colors、.fonts、h2、h3等元素单独设置的左边距：

.container {
  /* 可根据需求调整最大宽度和左右内边距 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
}
.colors, .fonts {
  /* 删除原来的margin左右50px的设置 */
  margin: 20px 0;
}

这个方案可以保证容器内所有元素默认左对齐，适配不同屏幕尺寸的效果也更稳定。

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