Проблема flex-wrap блоки не переносятся

.block__display-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.section__block {
  max-width: 100%;
}

.offers-block_img {
  width: 33.3%;
  height: 500px;
}

.offers-img1 {
  background: url('../img/2.jpeg') center no-repeat;
  background-size: 100% 100%;
}

.offers-img2 {
  background: url('../img/3.jpeg') center no-repeat;
  background-size: 100% 100%;
}

.offers-img3 {
  background: url('../img/4-9.jpeg') center no-repeat;
  background-size: 100% 100%;
}

.offers-content {
  padding: 45px;
}

.img__text-inside {
  color: #ffffff;
  text-align: center;
}

.offers__name {
  font-size: 48px;
}

.offers__text {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

<section class="section__block">
  <div class="block__display-flex ">
    <div class="offers-block_img offers-img1">
      <div class="img__text-inside container offers-content">
        <h1 class="offers__name">Special Offer</h1>
        <h3 class="offers__text">save 25%</h3>
      </div>
    </div>
    <div class="offers-block_img offers-img2">
      <div class=" img__text-inside container offers-content">
        <h1 class="offers__name">Boat Launch</h1>
        <h3 class="offers__text">pass 3 Day</h3>
      </div>
    </div>
    <div class="offers-block_img offers-img3">
      <div class="img__text-inside container offers-content">
        <h1 class="offers__name">Family Vacation</h1>
        <h3 class="offers__text">special activities</h3>
      </div>
    </div>
  </div>
</section>