Я начал работу над новым сайтом, и некоторое время я играл с дизайнами, однако одна проблема, которая у меня возникла, связана с позиционированием навигационной панели с полной шириной экрана, которая зафиксирована для прокрутки. Под ним я создалdiv называется «обертка», которая установлена в центре на ширину980px, Ниже приведен пример кода;

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

Ящик, который я создал внутри «обертки», ДОЛЖЕН (очевидно, не потому, что я делаю что-то не так - где-то)5px нижеnavBarОднако, потому что я использовалposition: fixed вместо этого он сидит под ним. Кто-нибудь может привести меня к тому, как я решу эту проблему и сделаю так, чтобы оболочка находилась непосредственно под панелью навигации, а не под ней, сохраняя при этом ее центрирование?