Definimos o tamanho da caixa que armazena o header com uma largura padrão de 940px:
.caixa-header{
position: relative;
width: 940px;
margin: 0 auto;
}Se reduzirmos o tamanho da janela do navegador para menos de 940px, notamos que o menu de navegação passa a ficar oculto - em partes ou por completo.
Como fazer com que o header acompanhe o tamanho da janela de forma que o menu sempre seja exibido?
Isso ocorre devido ao valor definido para a div ('width: 940px'). Significa que ele sempre vai ter esse tamanho, independente do tamanho da tela. Portanto se você diminuir a tela do seu navegador para menos que isso, o menu vai sumindo aos poucos, e lá embaixo vai ter a barra de rolagem para ir para os lados para exibir o resto da div.
obs: depois que se aprende flex-box tudo fica mais facil :D