Проблема Flexbox с форматированием заголовков в строках

Question

Я пытаюсь создать 3 ряда абзацев с отдельными заголовками, используя Flexbox. С абзацами все в порядке, но заголовок (h2) не идет поверх абзацев, а вместо этого вид слева от каждого абзаца.

Отредактировано для добавления HTML. Также я просто пытаюсь скопировать сайт, который мне понравился, на мой локальный сервер, поэтому ни одна из этих формулировок не является моей.

.container {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

.container h2 {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: hsl(0, 11%, 16%);
}

.container p {
  position: block;
  margin: 25px;
  50px;
  75px;
  100px;
}

<div class="container">
  <h2>First visit? Don't be skittish.</h2>
  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>
  <h2>Boarding, Grooming & Doggie Daycare</h2>
  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.
  </p>
  <h2>Refill Prescriptions</h2>
  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>
</div>

Answer 1

По умолчанию flex-direction: row помещает элементы по горизонтали , изменяя его на flex-direction: column , вероятно, исправит это, сделав стек элементов * вертикально 1008 *.

Answer 2

Если по какой-то причине вы просто должны использовать flexbox для этого, сделайте это так:

.container {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}

.container h2 {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: hsl(0, 11%, 16%);
  flex: 1 1 100%;
}

.container p {
  margin: 25px 50px 75px 100px;
  flex: 1 1 100%;
}

<div class="container">
  <h2>First visit? Don't be skittish.</h2>
  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>
  <h2>Boarding, Grooming & Doggie Daycare</h2>
  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.
  </p>
  <h2>Refill Prescriptions</h2>
  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>
</div>

Тем не менее, вы можете достичь того же самого без flexbox.

paragraphs и headers являются элементами уровня блока , и они будут отображаться таким образом по умолчанию.

.container h2 {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: hsl(0, 11%, 16%);
}

.container p {
  margin: 25px 50px 75px 100px;
}

<div class="container">
  <h2>First visit? Don't be skittish.</h2>
  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>
  <h2>Boarding, Grooming & Doggie Daycare</h2>
  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.
  </p>
  <h2>Refill Prescriptions</h2>
  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>
</div>