为何首组文本块未与其余块对齐？如何实现文本组整体居中且内部左对齐

你当前的实现存在两个核心逻辑漏洞，直接导致了首组偏移、需要靠负边距临时修补的问题：

• 你给section设置了纵向flex布局，但保留了默认的align-items: stretch规则，这个规则会让flex子元素自动拉满父容器的全宽。这种情况下你给每个文本组div加margin: 0 auto，因为元素宽度已经占满父容器，根本没有剩余空间可以分配给auto外边距，居中逻辑实际是失效的。
• 你没有给文本组设置统一的宽度基准，div的实际宽度完全由内部文字的长度自动撑开（fit-content模式）。这时候虽然auto边距看起来能让元素居中，但因为每个组的宽度随内容长短变化，左边缘的位置根本没有统一参照系——你感知到的“首组不对齐”，本质是首组的内容长度和其他组存在视觉差，加上h1是全宽文本居中、和下面的div用了两套独立的居中计算逻辑，进一步放大了偏移感。临时加margin-left: -2rem只是强行把首组的视觉位置挪到和其他组差不多的位置，并没有解决宽度基准不统一、两套居中计算逻辑的本质问题。

完全不需要靠负边距修补，调整布局逻辑让父容器统一负责对齐规则，步骤非常简单：

1. 把原来“每个div自己靠auto边距居中”的逻辑，改成在section上统一配置对齐规则：给flex容器加align-items: center，让所有文本组自动在水平方向居中，不需要给每个div单独写左右auto的外边距。
2. 给所有文本组div设置统一的宽度/最大宽度基准，比如用width: min(90%, 32rem)，既保证小屏下内容不贴边，又能让所有文本组的左右边缘完全对齐。
3. 直接在文本组div上设置text-align: left，保留组内部文字左对齐的效果，同时组的整体水平居中由flex容器负责。
4. 原来给每个div设置的底部2rem边距，可以直接换成section上的gap: 2rem，控制纵向间距更均匀，不会出现边距累加的误差。

对应的核心CSS实现如下：

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

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

section {
  display: flex;
  flex-direction: column;
  /* 统一控制子元素水平居中 */
  align-items: center;
  /* 统一控制子元素纵向间距 */
  gap: 2rem;
}

.loc-group {
  /* 统一的宽度基准，随视口自动适配 */
  width: min(90%, 32rem);
  /* 内部文字左对齐 */
  text-align: left;
}

这种实现的好处是所有对齐规则由flex容器统一计算，不存在多元素独立计算居中带来的偏差，响应式适配不需要额外写媒体查询，也不会出现撑出横向滚动条导致的偏移问题。

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