Почему элемент header group выходит за рамки контейнера при уменьшении размеров экрана?

Question

[Nadinbar]

https://codepen.io/wivqnifo-the-typescripter/pen/L...

Comments

[ThunderCat]

Уже сильно лучше, осталось прикрепить в кодепен файл стилей. И шаблон выглядит как заготовка под реакт/вью... className='header' явно не классический хтмл...

Answer 1

[ThunderCat]

Короче, у вас заданы жесткие размеры элементов внутри блока, пример:

.search__form {
    border: solid 1px;
    width: 622px;
    height: 48px;
    gap: 24px;
    margin-top: 16px;
}

Естественно при уменьшении экрана эти элементы останутся такого же размера, а блок контейнер продолжит уменьшаться, так как у него нет никаких ограничений по ширине. Не понятно какого другого поведения вы ждете от такой верстки?

Comments

[Nadinbar]

это в принципе логично, адаптив еще не сделан) может я неверно сформулировала, но почему фон header ползет тогда, будто вместе с контейнером?
.header {
background-color: #18191B;


}

[Nadinbar]

будто сам контейнер непропорционально съезжает ( относительно ширины экрана

[ThunderCat]

Nadinbar, у меня такого не наблюдается, возможно у вас где-то еще есть стили, не включенные в кодепен...
https://codepen.io/ThunderCat-aka-Snark/pen/wvLpJoz

[Nadinbar]

ThunderCat, да, есть у контейнера, добавила по ссылке
+ стандартный файл со сбросами стилей ( но я протестила - при его удалении ничего не меняется)

[Nadinbar]

сброс стилей

* {
padding: 0px;
margin: 0px;
border: none;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

/* Links */

a, a:link, a:visited {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

/* Common */

aside, nav, footer, header, section, main {
display: block;

}

h1, h2, h3, h4, h5, h6, p {

}

ul, ul li {
list-style: none;
}

img {
vertical-align: top;
}

img, svg {
max-width: 100%;
height: auto;
}

address {
font-style: normal;
}

/* Form */

input, textarea, button, select {
font-family: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
}

input::-ms-clear {
display: none;
}

button, input[type="submit"] {
display: inline-block;
box-shadow: none;
background-color: transparent;
background: none;
cursor: pointer;
}

input:focus, input:active,
button:focus, button:active {
outline: none;
}

button::-moz-focus-inner {
padding: 0;
border: 0;
}

label {
cursor: pointer;
}

legend {
display: block;
}