Os elementos abaixo do cabeçalho estão com tamanhos fixos, isto esta fazendo com que o seu cabeçalho quebre ou você não colocou a propriedade "flex-wrap: wrap;" na caixa onde os 3 elementos estao. Se não for isso, mande o codigo html também.

Oi!

Não resolveu ainda. Segue html:

<header>
            <div class="caixa">
                <h1>
                    <a href="index.html"><img src="logo.png" class="logo"></a>
                </h1>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

CSS de todo o cabeçalho:

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.logo:hover {
    transform: scale(1.2);
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110;
    right: 0;
}

nav li {
    display: inline;
    margin:  0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    font-size: 30px;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

Olá Bernardo, boa tarde!!

*Idendificando o Problema: *

De acordo com a sua pergunta, você quer saber porque quando diminuiu o tamanho de tela, o cabeçalho não acompanha o tamanho de tela. Vamos lá!!

*Solução do Problema: *

No seu elemento .caixa, você esta adicionando uma largura fixa de 940px no css, fazendo com que mesmo diminuindo o tamanho da tela, ele permanecerá com uma largura de 940px.

Par resolver isso, substitua o valor 940px para 100%. Assim ele irá colocar o elemento .caixa para ter uma largura que ocupe 100% do espaço disponivel independente do tamanho de tela, pois se a tela for 400px, o 100% da .caixa será 400px.

// Tire o margin, pois agora o elemento ocupa 100%

.caixa {
   width: 100%;
   position: relative; 

   // E se você quiser espaços nas bordas laterais, coloque um padding.
   padding: 0 32px;
}

*Conclusão: *

Você precisa se atentar a valores de tamanhos fixos, porque mesmo se a tela diminuir ou aumentar, ele vai manter aquele mesmo tamanho (porque ele é um valor absoluto, como os tipos px, pt e etc.).

Para assuntos responsivos, o melhor caso é usar de valores relativos como o %, em, rem, vw, vh e etc.

*Despedida: *

Tenha um bom estudo!!

Oi, Carlos!

Esta caixa foi criada pelo instrutor do curso para que a logo e os itens de navegação permanecessem sempre a uma distância proporcional e centralizada. Quando ponho a caixa em 100%, ela perde esta função. Tentei colocar o tamanho da caixa em 70% com margens laterais automáticas. A ideia funciona, mas quando diminuo o tamanho da janela, chega um momento em que os itens do navegador começam a se sobrepor à logo.

Ainda não encontrei uma solução para isto, mas também sou muito iniciante. rsrsrsrs

Valeu!

Os estam sobrepondo à logo porque elas estão dentro do elemento nav, que por sua vez, esta com o "poisition:absolute", fazendo com que ele siga uma posição "independente", indo para outra camada do eixo z.

*Conclusão: *

Mas pelo conteúdo que você esta estudando no momento, é normal não saber como resolver ou aplicar uma ideia. Se você seguir a trilha de formação front-end da alura, você vai ter os assuntos organizados e seguindo uma ordem do que se deve aprender primeiro.

Ou seja, com o conhecimento que você tem agora, você não vai conseguir fazer isso, porque você ainda não viu, mas para o que foi feito no curso, esta ótimo o projeto.