При уменьшении окна браузера сбивается верстка, как это исправить?

Question

[DeveloperV]

При уменьшении окна браузера получается вот это.
Видимо проблема с position absolute, который я вешаю на эти элементы.
https://varfolomeisafronov.github.io/sedona/
https://github.com/varfolomeisafronov/sedona

Answer 1

[Narts]

.intro-img {
    display: block;
    position: absolute;
    top: 76px;
    text-align: center;
    margin: 0px auto;
    left: 0px;
    right: 0px;
}

Вообще по хорошему

<img src="img/background-photo.jpg" width="1200" height="508">

вообще убрать; img/background-photo.jpg поставить на background-image родительского .main-logo; убрать абсолютное позиционирование у .intro-img, отцентровать потомков .main-logo ну и настроить отступы

Comments

[DeveloperV]

да, убрал img, добавил background-image, проблема в этом (я сделал проще, просто сделал одним слоем, фон/слова/белую линию) и вот что я получил, если я делаю это img, всё работает, ничего не вылазит за пределы контейнера. но если я задаю через background-image, получается вот это.
но то что я сделал не решение, правильней будет всё это отдельно лепить, но вот не получается.