如何修复React应用中Header的CSS对齐属性问题？

问题分析 #

你的Our Mission标题无法左对齐的核心原因：父容器#app设置了display: flex + flex-direction: column + align-items: center，这个align-items: center会让所有垂直排列的flex子元素在水平方向居中，导致#project-mission-header容器本身被居中，标题自然处于页面中间区域。你添加的justify-content: left无效，因为justify-content作用于flex主轴（此处主轴为垂直方向），对水平对齐没有影响。

解决方法 #

方法1：让标题容器脱离父容器的居中约束

修改styles.css中#project-mission-header的样式，添加align-self: flex-start覆盖父容器的居中规则：

#project-mission-header {
  width: 810px;
  align-self: flex-start; /* 使容器靠左对齐，标题自然左对齐 */
}

方法2：保持容器居中，确保标题在容器内左对齐（若需要）

如果希望#project-mission-header仍居中，只需显式指定标题的文本对齐方式（h2默认左对齐，若被继承样式覆盖则需手动设置）：

#project-mission-header h2 {
  text-align: left; /* 强制左对齐，覆盖继承的对齐规则 */
}

修改后完整样式示例 #

#app {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#home-background-image {
  width: 100%;
  height: 350px;
  background: url("https://png.pngtree.com/thumb_back/fh260/background/20201026/pngtree-futuristic-shape-abstract-background-chemistry-technology-concept-for-website-image_438818.jpg");
  background-size: cover;
}

#project-header {
  position: absolute;
  top: 100px;
  color: white;
}
#project-exp {
  font-size: 3rem;
  font-weight: 600;
  margin: 0;
}

#project-mission-header {
  width: 810px;
  align-self: flex-start; /* 新增的关键属性 */
}

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