Pozycjonowanie „wrappera” pod stałym paskiem nawigacyjnym?

Zacząłem pracować nad zupełnie nową stroną i od jakiegoś czasu bawię się projektami, jednak wydaje mi się, że mam problem z pozycjonowaniem paska nawigacyjnego z pełną szerokością ekranu, która jest ustalona do przewijania. Poniżej utworzyłemdiv zwany „wrapper”, który jest ustawiony na środku na szerokości980px. Poniżej znajduje się przykładowy kod;

<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>

Pudełko, które stworzyłem w „opakowaniu” POWINIEN (oczywiście nie dlatego, że robię coś złego - gdzieś) siedzieć5px poniżejnavBar, jednak ponieważ użyłemposition: fixed zamiast tego siedzi pod nim. Czy ktoś mógłby mnie poprowadzić do tego, jak rozwiązać ten problem i mieć go tak, aby opakowanie znajdowało się bezpośrednio poniżej, a nie pod paskiem nawigacyjnym, zachowując jego centrowanie?

questionAnswers(2)

yourAnswerToTheQuestion