Я не могу сделать адаптив секции на Bootstrap 5. Нужна помощь

Question

Проблема в том что когда ширина становится меньше 567 px картина становится в ряд по два но безумное отступление

Проблемы с секцией Присоединяйтесь к нам в Instagram Код

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/style.css" />

    <title>Item</title>
  </head>
  <body>
    <main>
      <section class="Our-services">
        <div class="container">
          <h2 class="Our-service-title">Наши услуги</h2>
          <div class="row d-flex justify-content-between">
            <div class="col-md-4 mb-4 col-sm-12">
              <div
                class="card justify-content-center align-items-center"
                style="background-image: url(./img/Our-service/01.jpg)"
              >
                <p class="card-text text-center">Загородный дом</p>
              </div>
            </div>
            <div class="col-md-4 col-sm-12">
              <div
                class="card justify-content-center align-items-center"
                style="background-image: url(./img/Our-service/03.jpg)"
              >
                <div
                  class="card-body d-flex flex-column justify-content-center align-items-center"
                >
                  <p class="card-text text-center">Квартира</p>
                  <button class="main-btn">Посмотреть</button>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-12">
              <div
                class="card justify-content-center align-items-center"
                style="background-image: url(./img/Our-service/02.jpg)"
              >
                <p class="card-text text-center">Нежилые <br />помещения</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="Join-Instagram">
        <div class="container">
          <h2 class="Join-Instagram-title">
            Присоединяйтесь к нам <br />
            в Instagram
          </h2>
          <div class="row align-items-center">
            <div class="col-6">
              <img src="./img/Join-Instagram/01.jpg" />
            </div>
            <div class="col-6">
              <img src="./img/Join-Instagram/02.jpg" />
            </div>
            <div class="col-6">
              <img src="./img/Join-Instagram/03.jpg" />
            </div>
            <div class="col-6">
              <img src="./img/Join-Instagram/04.jpg" />
            </div>
            <div class="col-6">
              <img src="./img/Join-Instagram/05.jpg" />
            </div>
            <div class="col-6">
              <img src="./img/Join-Instagram/06.jpg" />
            </div>
            <div class="col-6">
              <img src="./img/Join-Instagram/07.jpg" />
            </div>
            <div class="col-6">
              <img src="./img/Join-Instagram/08.jpg" />
            </div>
          </div>
        </div>
        <div
          class="btn-instagram d-flex align-items-center justify-content-center"
        >
          <button class="main-btn">Присоедениться</button>
        </div>
      </section>
    </main>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>

БЛОГ НА HUSL

Я не могу сделать адаптив секции на Bootstrap 5. Нужна помощь

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