Toda a página ficou com background: #BBBBBB

Olá Bruno, se você deseja aplicar o background apenas em um elemento html você precisa no CSS especificar qual a tag que você deseja aplicá-lo. Segue um exemplo de código abaixo:

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

Nesse exemplo o background fica aplicado apenas no header. Espero ter ajudado, bons estudos.

Caso já esteja seguindo a dica da Ially e não funcionou, tente a solução abaixo.

Eu tive este mesmo problema inicialmente e revisando o código, percebi que a tag header não estava fechada (veja abaixo). Verifique se não foi a mesma situação. Corrigindo isso, funcionou.

        <header>
            <div class="caixa">
                <h1><img src = "logo.png"></h1>
                    <nav>
                        <ul class="navegacao">
                            <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>