Блог

У меня есть два контейнера, как вы можете видеть по коду:

  <section class="infos shadow">
        <div  class="container">
            <div id="left-info" class="row">
                <div class="col-8">
                    <h4>Curso</h4>
                        <br>
                    <p class="lead text-justify">
                        On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.
                    </p>
                </div>
                <div class="col">
                    <img src="{% static "images/cards-256.ico" %}" alt="">
                </div>
            </div>
        </div>
        
        <hr>

        <div class="container">
            <div id="right-info" class="row">
                <div  class="col">
                    <img src="{% static "images/diamond-256.ico" %}" alt="">
                </div>
                <div class="col-8">
                    <h4>VIP</h4>
                        <br>
                    <p class="lead text-justify">
                        On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.
                    </p>
                </div>
            </div>
        </div>
    </section>
  

И это css:

 .infos{
    padding-top: 100px;
    padding-bottom: 100px;
}


.infos .container{
    padding-top: 50px;
    padding-bottom: 50px;
}

#left-info{
    margin-left: 10%;
    margin-right: 10%;
}

#left-info img{
    width: 55%;
}

#right-info{
    margin-left: 10%;
    margin-right: 10%;
}

#right-info img{
    width: 55%;
}
  

Сайт выглядит точно так:

Проблема, как вы можете видеть, в том, что пространство между столбцами в первой строке не совпадает со столбцами во второй, и я хочу, чтобы первый был похож на второй

Это margin вполне ожидаемо, поскольку img используется width:55%; col если вы зададите класс изображения img-fluid и удалите свой пользовательский размер, который вы добавили, это решит проблему.

Удалите это из вашего CSS.

 #left-info img {
  width: 55%;
}

#right-info img {
  width: 55%;
}
  

Затем добавьте класс img-fluid в свой img тег.

И это лучший вариант, на мой взгляд

Вот как выглядит ваш раздел. Вот почему у вас есть запас.

кроме того, любой элемент, который вы добавляете в свой div, будет размещен слева направо. Я надеюсь, это имеет смысл, почему у вас был этот запас.