在h2元素下方对齐p元素

Question

当前将CSS内容放置在目标网页上。如何使我的p元素在h2元素下方对齐？就像我想要的样子：

这是我的样子：

这是CodePen的link。

谢谢。

master

* {
  font-family: Arial;
}

@media (max-width: 768px) {
  * {
  font-family: Tahoma;}
}

#header {
  position: fixed;
  width: 100%;
  display: flex;
  top: 0;
  background-color: white;
  opacity: 0.8;
}
#header img {
  height: 75px;
  width: 75px;
  margin-top: -10px;
}
#header h1 {
  font-size: 23px;
  margin-left: -20px;
}
#header nav {
  margin-left: 730px;
  margin-top: 15px;
}
#header a {
  color: black;
  text-decoration: none;
}
.nav-link {
  margin-right: 10px;
}

#glove {
  margin-top: 100px;
  margin-left: 50px;
}
.glove-feature {
  display: flex;
  flex-direction: row;
}
.glove-feature img {
  height: 100px;
  width; 100px;
}
.description {
  padding: 5px;
  margin-top: -10px;
  margin-bottom: 15px;
}

#features {
  margin-top: 50px;
}
#features h2 {
  text-align: center;
}
#features iframe{
  display: block;
  margin: 0 auto;
}

#pricing {
  margin-top: 100px;
  text-align: center;
  border: 1px dashed black;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#pricing h3 {
  font-weight: normal;
}
#pricing p {
  font-style: italic;
}

#close {
  margin-top: 50px;
  text-align: center;
  font-size: 20px;
}
input[type=submit] {
  background-color: #DBBC58;
  border-radius: 6px;
}

Answer 1

您需要在div和h2周围加上额外的p，才能在flex父级中正确格式化它们。我将CSS和HTML简化为最小的正确示例，还选择使用类代替CSS选择器的ID来删除重复的样式：

* {
  font-family: Arial;
}

.glove-feature {
  display: flex;
  flex-direction: row;
}

.glove-feature img {
  height: 150px;
  width: 150px;
}

.description {
  padding: 10px;
}

<div id="glove">
  <div id="leather" class="glove-feature">
    <img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
    <div class="description">
  <h2>Authentic Leather</h2>
  <p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
    </div>
    </div>
    <div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
      <div class="description">
  <h2>Aerodynamically Tested</h2>
  <p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
      </div>
    </div>
    <div id="sewing" class="glove-feature">
  <img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
  <div class="description">
  <h2>Hand-made</h2> 
  <p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
      </div>
</div>