Почему не работает flex-wrap: wrap? Ячейка не переносится на другую строку при сжимании окна браузера

.why-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 46px -15px 0 -15px;
}

.why-item {
  box-sizing: border-box;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 312px;
  text-align: center;
  margin: 15px;
}

.why-item-title {
  font-size: 24px;
  line-height: 29px;
  margin-top: 24px;
}

.why-item-text {
  font-size: 16px;
  line-height: 1.4;
  margin-top: 24px;
}

<div class="why-items">
  <div class="why-item">
    <img class="why-item-image" src="images/burger.png" alt="burger">
    <h3 class="why-item-title">Авторские рецепты</h3>
    <p class="why-item-text">Наши бургеры обладают уникальным сочетанием вкусов и не похожи ни на какие другие. Мы тщательно отбираем лучшие ингредиенты и сочетания вкусов для нашего меню.</p>
  </div>
  <div class="why-item">
    <img class="why-item-image" src="images/meat.png" alt="burger">
    <h3 class="why-item-title">Мраморная говядина</h3>
    <p class="why-item-text">Для наших бургеров мы используем отборную 100% мраморную говядину, которую закупаем исключительно у фермеров. Мы уверены в качестве нашего мяса.</p>
  </div>
  <div class="why-item">
    <img class="why-item-image" src="images/food-truck.png" alt="burger">
    <h3 class="why-item-title">Быстрая доставка</h3>
    <p class="why-item-text">Мы доставляем в пределах МКАД за 30 минут, а если не успеем — доставка бесплатно. Мы тщательно упаковываем наши бургеры, чтобы по дороге они не остыли.</p>
  </div>
</div>