Не срабатывает space-between

Question

Сверстал около 5 секций, все нормально, везде +- одинаковый принцип построения контейнеров.

Но в последнем не срабатывает свойство space-between.

В моем контейнере .contacts-container задано свойство : max-width: 1170px;

Выглядит это следующим образом :

Но ведь по идеи, эти два составляющих флекс-бокса должны встать по краям. однако этого не происходит

Публикую часть кода :

.contacts {
  display: flex;
  flex-direction: column;
  background: url(/img/background-contacts.jpg) no-repeat center bottom;
}

.contacts-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.contacts>h2 {
  font-family: 'Montserrat';
  font-weight: 700;
  font-size: 56px;
  text-align: center;
  padding: 60px 0 60px 0;
}

.contacts-list {
  margin-bottom: 70px;
}

.contacts-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.contacts-item>img {
  align-self: center;
}

.contacts-form {
  padding: 15px;
  background: linear-gradient(193.33deg, #183976 18.17%, rgba(21, 40, 74, 0) 36.44%), #00519B;
  border-radius: 18px;
  box-shadow: 0 7px 0 0 #122b5a;
  align-self: center;
  margin-right: 50px;
  margin-bottom: 80px;
  min-width: 360px;
}

.contacts-form p:first-of-type {
  font-weight: 400;
  font-size: 30px;
  color: white;
  margin: 15px auto;
  padding: 0 5% 0 5%;
  text-align: center;
}

.contacts-form p:last-of-type {
  font-weight: 400;
  font-size: 16px;
  color: white;
  margin: 0px auto 15px auto;
  padding: 0 5% 0 5%;
  text-align: center;
}

.contacts-form input[type="submit"] {
  margin-bottom: 15px;
}

<section class="contacts">

  <h2>Контактная информация</h2>

  <div class="contacts-container">

    <form class="contacts-form" action="#" method="post" enctype="multipart/form-data">
      <p>Остались вопросы ?</p>
      <p>*перезвоним в течении 15 мин</p>
      <input type="text" name="name" placeholder="Ваше имя">
      <input type="tel" name="phone" placeholder="Ваш телефон">
      <input type="submit" value="Оставить заявку">
    </form>


    <ul class="contacts-list">
      <li class="contacts-item">
        <img src="/img/contacts_svg_1.png" alt="Наименование Индивидуального предпринимателя">
        <p>ИП *скрыто* </p>
      </li>
      <li class="contacts-item">
        <img src="/img/contacts_svg_2.png" alt="Номер ИНН">
        <p>ИНН : *скрыто* /p>
      </li>
      <li class="contacts-item">
        <img src="/img/contacts_svg_3.png" alt="Номер телефона">
        <p>*скрыто* <br> *скрыто*
        </p>
      </li>
      <li class="contacts-item">
        <img src="/img/contacts_svg_4.png" alt="Электронная почта">
        <p>*скрыто*</p>
      </li>
    </ul>
  </div>

</section>

БЛОГ НА HUSL

Не срабатывает space-between

Ответы (0 шт):