Растягивание содержимого внутри блока на всю ширину

Question

Есть шапка сайта

В нем Поиск среди 10000 товаров и кнопка Найти должны располагаться на всю ширину блока (а не как на рисунке - прижаты к левому краю). Привожу код

#pageHeader .headerinsidessecondrow {
        padding-left: 74px;
        padding-right: 74px;
        width: 100%;
        height: 57px;
        display: flex;
        /*justify-content: space-between;*/
        align-items: center;
        font: 16px "PT Sans",sans-serif;
}

.catalog {
    margin-left: auto;
    margin-right: auto;
    flex: 20%;
}

.catalog .catalogbutton{
    margin-left: auto;
    margin-right: auto; 
}

.betweenspace {
    flex: 15%;
}

.inputsearch {
    margin-left: auto;
    flex: 30%;
    /*border-bottom-width: 0px;*/
    /*height: 32px;*/
}

.searchbutton {
    margin-left: auto;
    flex: 10%;
    height: 30px;
}

.findinfo {
    flex: 40%;
}

.secondbetweenspace {
    flex: 5%;
}

.loginandsignup {
    margin-left: auto;
    margin-right: 0px;
    display: flex;
    align-items: center;
    flex: 10%;
    display: flex;
    justify-content: flex-end;
    align-self: center;
}

.basket {
    /*margin-left: auto;*/
    margin-right: 0px;
    display: flex;
    align-items: center;
    flex: 10%;
    display: flex;
    justify-content: flex-end;
    align-self: center;
}

<div class="headerinsidessecondrow">
<span class="catalog">
    <button class="catalogbutton">Каталог товаров</button>
</span>

<span class="betweenspace">
</span>

<span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
            <span class="searchbutton">
                <button>Найти</button>
            </span>
</span>

<span class="secondbetweenspace">
</span>

<span class="loginandsignup">
    <span class="loginsignupimg">
        <img src="../images/header_profile-icon.png">
    </span>
    <span class="loginsignuptext">
        Вход и регистрация
    </span>
</span>

<span class="basket">
    <span class="loginsignupimg">
        <img src="../images/header_cart-icon.png">
    </span>
    <span class="loginsignuptext">
        Корзина
    </span>
</span>
</div>

Подскажите как добиться растяжения вышеуказанного элемента на всю ширину блока, в котором он содержится

<span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
            <span class="searchbutton">
                <button>Найти</button>
            </span>
</span>

БЛОГ НА HUSL

Растягивание содержимого внутри блока на всю ширину

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