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

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 почему то нет.

Это только часть кода, продолжая писать я еще раз столкнулся с такой проблемой.

Можно ли это решить?


Ответы (0 шт):