Помогите с версткой сайта

Question

Помогите с версткой сайта

Георгий Бурмистров Ученик (245), на голосовании 11 месяцев назад

Проблема в том что когда добавляю контент в .header-more у меня все плывет

когда нет контента все хорошо

  
 
 
     
     
     
    Test 
 
 
     
         
        
            /* Вот сюда добавить контент */

 .body { 
    width: 1920px; 
    height: 4171px; 
    background-color: white; 
    margin: 0; 
} 
 
.head { 
    width: 1296px; 
    height: 110px; 
    margin-left: 312px; 
    margin-right: 312px; 
    background-color: wheat; 
} 
 
.header-logo { 
    width: 108px; 
    height: 30px; 
    margin-top: 40px; 
    margin-bottom: 40px; 
    margin-right: 113.67px; 
} 
 
.header-more { 
    display: inline-block; 
    width: 613px; 
    height: 22px; 
    margin-bottom: 44px; 
    background-color: aqua; 
}

Подскажите пожлуйста что делать и как лучше

Answer 1

Думаю, это как-то связано с inline-block у .header-more. Не знаю как ты в него контент вставляешь, через блочные элементы возможно - тогда получается, что он должен занять всю ширину, поэтому он не может находится в одной строке с img, и его вниз опускает.
Я бы вообще такое через display: flex делал, на .head его повесил бы.

Answer 2

Ии ответил
Ваша проблема, скорее всего, связана с использованием фиксированных значений для высоты и отступов в блоке `.header-more`. Рекомендуется использовать относительные единицы измерения, такие как проценты или em, чтобы обеспечить более гибкое и отзывчивое позиционирование элементов. Попробуйте настроить стили, используя относительные значения для размеров и отступов.

Answer 3

.head {
display: flex;
align-items: center;
gap: 113px;
}

Тут надо всё переверстать. Все размеры и отступы прибиты гвоздями к разрешению экрана и размерам блоков. Так не надо.
Откуда взялось 4171px? Почему не 100dvh?