为何设置.synopsis元素padding为0px后，文本仍无法与Character标题左对齐？

你的问题出在两个关键地方：

1. 重复CSS样式覆盖：你定义了两次.synopsis类，后面的样式块设置了padding-left:100px，直接覆盖了前面padding-left:0px的设置，导致Synopsis标题左侧多出100px内边距。

2. 标题元素的自动居中margin：h1,h2,h3的margin:0px auto会让这些块级标题在父容器中水平居中，即使你设置了padding，标题本身的居中特性也会破坏左对齐效果。

修复步骤： #

1. 删除重复的.synopsis样式块

找到CSS中这段重复代码并删除：

.synopsis {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  border-bottom-style: solid;
  border-bottom-color: yellow;
}

2. 调整标题元素的margin

修改h1,h2,h3的样式，移除自动居中的左右margin：

h1,
h2,
h3 {
  color: rgb(161, 29, 0);
  margin: 0; /* 替换原来的margin:0px auto */
  font-weight: bold;
}

3. 统一两个标题的内边距（可选）

确保.synopsis和.characters的padding设置一致，让下划线长度相同：

.synopsis {
  display: block;
  padding-left: 0px;
  padding-right: 100px;
  padding-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-color: yellow;
  text-align: left;
  box-sizing: border-box;
}

.characters {
  padding-left: 0px;
  padding-right: 100px;
  padding-bottom: 2px; /* 添加这个让下划线和Synopsis一致 */
  border-bottom-style: solid;
  border-bottom-color: yellow;
  text-align: left;
}

修复后的关键CSS示例： #

body {
  background-color: rgb(14, 173, 225);
  display: block;
  margin: 0px auto;
  justify-content: center;
  align-items: center;
}

.synopsisdivheader {
  background-color: rgb(14, 173, 225);
  display: block;
  margin: 10px 100px 10px 100px;
  justify-content: center;
  align-items: center;
}

.synopsis {
  display: block;
  padding-left: 0px;
  padding-right: 100px;
  padding-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-color: yellow;
  text-align: left;
  box-sizing: border-box;
}

.charactersdiv {
  background-color: rgb(14, 173, 225);
  display: block;
  margin: 10px 100px 10px 100px;
  justify-content: center;
  align-items: center;
}

.characters {
  padding-left: 0px;
  padding-right: 100px;
  padding-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-color: yellow;
  text-align: left;
}

h1,
h2,
h3 {
  color: rgb(161, 29, 0);
  margin: 0;
  font-weight: bold;
}

修改后，Synopsis与Characters标题会在同一水平线上左对齐，下划线长度也保持一致。

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