已将Padding设为0仍有多余内边距，求CSS布局解决方案

你遇到的不是padding的问题，而是浏览器给<h2>和<h4>这类标题标签默认添加了margin（外边距），所以即使你给.mission-text设置了padding，或者单独给标题设padding，都没法消除这些多余的间距。

直接给这两个标题标签清除默认margin就行，修改后的CSS如下：

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* 给main加相对定位，让绝对定位的mission-text以它为参照 */
  position: relative;
}

.our-mission-img {
  margin: 69px;
  height: 700px;
  z-index: 0;
  width: 1200px;
}

.mission-text {
  position: absolute;
  text-align: center;
  background-color: black;
  color: white;
  width: 1200px;
  padding: 0; /* 这里可以直接设0了 */
}

/* 清除标题的默认margin */
.mission-text h2,
.mission-text h4 {
  margin: 0;
}

另外注意：你的.our-mission-img原本设置的position: relative没必要，应该把position: relative移到.main上，这样绝对定位的文本容器才能正确以图片所在的父容器为参照，保证居中在图片上方。

HTML结构保持不变：

<div class="main">
  <img class="our-mission-img" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="berry-blitz">
  <div class="mission-text">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanllay Currted, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea </h4>
  </div>
</div>

修改后多余间距会消失，你可以根据需求调整.mission-text的padding来控制内部留白。

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