Eu comecei a trabalhar em um novo site e tenho brincado com projetos por um tempo, no entanto, um problema que parece estar tendo é sobre o posicionamento de uma barra de navegação com uma largura de tela cheia que é fixada para rolar. Por baixo eu criei umdiv chamado de "wrapper", que é definido para centrar a uma largura de980px. Abaixo está o exemplo de código;

<style>
    #navBar {
        background: RGB(0, 0, 0);
        height: 30px;
        position: fixed;
        width: 100%;
    }

    #wrapper {
        margin: 0 auto;
        width: 980px;
    }
</style>

<div id="navBar">

</div>

<div id="wrapper">
    <div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div>
</div>

A caixa que eu criei dentro de "wrapper" deve (obviamente não é porque eu estou fazendo algo errado - em algum lugar) sentar5px abaixo denavBar, no entanto, porque eu useiposition: fixed ele fica embaixo dele. Alguém poderia me levar a como resolver esse problema e tê-lo de modo que o invólucro fique diretamente abaixo, em vez de sob a barra de navegação, mantendo-o centralizado?