Блок уменьшается при уменьшении ширины окна. Знаю, что такой вопрос уже задавали, но ответа на него так и не нашел

Доброго всем дня или вечера. У меня такой вопрос..

Вот обычный HTML-код, с обычным хедером и контейнером внутри:

<header class="header">
        <div class="container">
        </div>
</header>

Далее идут стили:

*{
    box-sizing: border-box;
}

.header{
    background-color: #ccc;
    height: 100px;
}

.container{
    width: 1770px;
    height: 100px;
    margin: auto;
    border: 1px solid red;
} 

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

Пробовал задавать одинаковый background для хедера и контейнера, визуально все норм, но проблема все равно остается.

Может стоит указывать другие единицы измерения для контейнера кто знает? Хотя я уже пробовал.