problema! | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

A faixa cinza do cabeçalho que vai de uma ponta a outra, quando eu mexo na janela do browser para uma janela menor a aparência do site muda. Como resolvo isso?

<!DOCTYPE html>

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Produtos - Baberaria Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="produtos.css">
</head>

<body>
    <header>
        <div class="caixa">
            <h1><img src="imagem/logo.png"></h1>

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

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

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

}

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

nav li
{
    display: inline;
    margin: 0 0 0 15px; /* altera o espaço interno. Cima/Direita/Baixo/Esquerda */
}

nav a
{
    text-transform: uppercase; /* Muda a forma do texto. Ex: Maiúsculo, Minúsculo */
    color: #000000; /* Muda a cor do texto */
    font-weight: bold; /* altera o peso ou intensidade da fonte. Ex: Negrito,Normal */
    font-size: 20px; /* altera o tamanho da fonte */
    text-decoration: none; /* remove decoração do texto */
}