Почему родительский элемент не видит часть ширины дочерних?
header {
display: flex;
justify-content: space-between;
width: 76vw;
height: 2vw;
}
body {
margin: 3vw 12vw;
}
.header-textcontainer {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 39vw;
}
.header-container {
display: grid;
row-gap: 0.4vw;
width: 16vw;
grid-template-columns: 16% 84%;
grid-template-rows: 57% 43%;
}
.header-addtext {
grid-column: 2 / 3;
grid-row: 2 ;
}
.header-select {
/* Убираем стандарт стиль */
appearance: none;
background-color: transparent;
outline: none;
border: none;
cursor: pointer;
margin-right: 0.8vw;
}
.header-form {
position: relative;
}
.header-form::after {
content: '';
position: absolute;
top: 50%;
left: 1.5vw;
transform: translateY(-50%);
display: block;
pointer-events: none;
border-style: solid;
border-width: 0.26vw 0.26vw 0 0.26vw;
border-color: #565656 transparent transparent transparent;
transform: rotate(0deg);
}
<header>
<div class="header-container">
<div class="header-logo">
<span class="corner right-up"></span>
<span class="corner right-down"></span>
<span class="corner left-up"></span>
<span class="corner left-down"></span>
</div>
<div class="header-maintext">Screenshoter+</div>
<div class="header-addtext">Скриншот и запись экрана в 1 клик</div>
</div>
<span class="header-textcontainer">
<div class="header-text">Функции</div>
<div class="header-text">Преимущества</div>
<div class="header-text">Как использовать</div>
<div class="header-text">Частые вопросы</div>
<div class="header-form">
<select name="language" id="" class="header-select header-text">
<option value="Russian">RU</option>
<option value="English">ENG</option>
</select>
</div>
</span>
</header>
Если вкратце, у меня в header есть select (header-select в css), которому я поменял стрелочку. header видит эту стрелочку и добавляет её в свою ширину, а body почему то нет.
Это только часть кода, продолжая писать я еще раз столкнулся с такой проблемой.
Можно ли это решить?