Почему один section находится под другим section?

Question

[Илья Атабеков]

Почему один section находится под другим section?

<section class="section__three">
    <h1 class="h1__section text-center">Новости</h1>
    <br><br>
    <br><br>
    <div class="container">
        <div class="card__news">
            <div class="row">
                <div class="col-md-5">
                    <img class="img__card" src="https://i.yapx.ru/T40C7.png">
                </div>
                <div class="col-md-6">
                    <br><br> <br><br>
                    <h2 class="">Перенос концертов Казахстане</h2>
                    <br><br>
                    <p class="p__card">На протяжении двух месяцев наша компания World Entertainment Group интенсивно
                        работала над организацией Азиатского тура исполнителя международного уровня Дидюли, концерты
                        которого были запланированы в Казахстане, Узбекистане и Кыргызстане. <br>
                        К сожалению, по объективным причинам мы вынуждены перенести этот тур в связи...</p>
                    <button class="btn__card">
                        Читать далее <img class="arrow__btn" src="{% static 'main/img/right-arrow.png' %}">
                    </button>
                </div>
            </div>
            <br><br><br><br>
            <div class="card__news">
                <div class="row">
                    <div class="col-md-5">
                        <img class="img__card" src="https://i.yapx.ru/T40KT.png">
                    </div>
                    <div class="col-md-6">
                        <br><br> <br><br>
                        <h2 class="">Концерты на юге России</h2>
                        <br><br>
                        <p class="p__card">Группа «ДиДюЛя» дает сотни живых масштабных шоу в год с обширной географией
                            гастролей по России, странам ближнего и дальнего зарубежья. Выступления проходят на самых
                            крупных и престижных концертных площадках, с неизменными аншлагами. Так, в Москве ДиДюЛя
                            регулярно играет в Государственном Кремлевском дворце и Crocus City Hall...</p>
                        <button class="btn__card">
                            Читать далее <img class="arrow__btn" src="{% static 'main/img/right-arrow.png' %}">
                        </button>
                    </div>
                </div>
                <br><br><br><br>
                <div class="card__news">
                    <div class="row">
                        <div class="col-md-5">
                            <img class="img__card" src="https://i.yapx.ru/T40P8.png">
                        </div>
                        <div class="col-md-6">
                            <br><br> <br><br>
                            <h2 class="">Концерт в Crocus City Hall</h2>
                            <br><br>
                            <p class="p__card">Дидюля, гитарист-виртуоз и мультиинструменталист, в сопровождении
                                камерного оркестра представляет новую программу Live with String Quartet! Помимо уже
                                известных и полюбившихся широкой публике произведений, столичных слушателей ожидают
                                новые, необыкновенные композиции...</p>
                            <button class="btn__card">
                                Читать далее <img class="arrow__btn" src="{% static 'main/img/right-arrow.png' %}">
                            </button>
                        </div>
                    </div>

                </div>
            </div>

</section>


<div class="section__four">
    <div class="container">
    <h1 class="h1__section text-center">Тур 2022</h1>
          <div class="concert">
            <div>
                <p class="date_c">

                </p>
                <div class="concert">

                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor"
                         class="svg1 bi bi-calendar3" viewBox="0 0 16 16">
                        <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
                        <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                    </svg>
                    29.09.22<span class="c_name">Севастополь</span><a
                        class="tik1" href="https://megaarts.ru/detail.php?id=562147">
                    Билеты
                </a>
                    <div class="line"></div>
                </div>
            </div>
        </div>

        <div class="concert">
            <div>
                <p class="date_c">

                </p>
                <div class="concert">

                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor"
                         class="svg1 bi bi-calendar3" viewBox="0 0 16 16">
                        <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
                        <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                    </svg>
                    30.09.22<span class="c_name">Феодосия</span><a
                        class="tik1" href="https://megaarts.ru/detail.php?id=562148">
                    Билеты
                </a>
                    <div class="line"></div>
                </div>
            </div>
        </div>

        <div class="concert">
            <div>
                <p class="date_c">

                </p>
                <div class="concert">

                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor"
                         class="svg1 bi bi-calendar3" viewBox="0 0 16 16">
                        <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
                        <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                    </svg>
                    01.10.22<span class="c_name">Ялта</span><a
                        class="tik1" href="https://megaarts.ru/detail.php?id=562149">
                    Билеты
                </a>
                    <div class="line"></div>
                </div>
            </div>
        </div>

</div>

Comments

[Ankhena]

В вашем коде всего один section.

Но вообще, каждый section начинается с новой строки, потому что так ведут себя обычные блочные элементы.

А почему вы считаете, что так быть не должно? Да еще и не приложив стили вообще.

А лучше сделайте песочницу на codpen.io с видимой проблемой.

[Илья Атабеков]

Да, я там ошибся. Вместо section сделал div. Но всё равно один section под другим

[Николай]

А как должно быть ?
Вы же начинаете все section отдельным блоком
Опишите задачу, как должно быть

[Ankhena]

Илья Атабеков,

Вместо section сделал div. Но всё равно один section под другим

Да. Им так и положено.

Если вы хотите, чтобы они шли в строку, то нужно изучить как работают флексы и гриды.

Answer 1

[JuniorHabr]

Что section, что div имеют display:block по дефолту, именно по этому они как блоки растягиваются на всю ширину и выстраиваются друг под друга