CSS中h1标签无法居中及Flex布局间距异常求助

问题1：h1文本无法居中的解决方法 #

你给h1设置的text-align: center只是让文本在自身容器内居中，但h1因为设置了max-width: 632px，它自身的盒子并没有在页面水平居中。只需给h1添加自动水平外边距，就能让整个盒子居中：

h1 {
  color: white;
  font-size: 52px;
  font-weight: 800;
  max-width: 632px;
  text-align: center;
  border: 1px solid black;
  margin: 0 auto; /* 新增：让盒子水平居中 */
}

问题2：header中menu与cta间距过小的解决方法 #

justify-content: space-between会把header的剩余空间平均分给logo-menu、menu-cta这两个间隔，但因为logo的宽度远小于cta容器的宽度，导致menu和cta之间的间距被压缩，小于你设置的按钮间56px间距。

给header添加gap: 56px，就能强制元素之间的最小间距为56px，同时保留两端对齐的效果：

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 72px;
  margin-left: 80px;
  margin-right: 80px;
  gap: 56px; /* 新增：设置元素间最小间距 */
}

如果不需要严格的两端对齐，也可以把justify-content改为space-evenly，让三个元素之间的间距完全相等，但这样logo和cta会偏离页面左右边缘。

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