Здравствуйте! Имеется сайт, на котором хочу сделать шапку, но столкнулся с такой проблемой.
Код страницы (header и есть сама шапка)
Файл стилей:
Как это всё дело выглядит сейчас
Но, проблема в том, что если в дальнейшем вставлять какие-то блоки с информацией без тегов <br> (В самом начале это видно, но ниже ещё раз скинул кусок кода), то получается печаль-беда. Если же делать отступы margin-top, тоже получается печаль-беда, скрины - ниже.
<header>
<div id="logo">
<a href="http://normalgame.ru/">NormalGame</a>
</div>
<nav>
<a href="http://forum.normalgame.ru" target="_blank">Форум</a><a href="http://bans.normalgame.ru" target="_blank">Банлист</a><a href="#">Магазин</a><a href="#">Правила</a><a href="#">О нас</a>
</nav>
</header>
<main>
<br><br><br><br><br><br><br>
<section>
<h1>Из меня жопорукий верстальщик</h1><br><br><br><br><br><br><br><br><br><br>
</section>
(Скрины)
https://yadi.sk/i/a3hGWWiM3MZg6R https://yadi.sk/i/va5iNtde3MZg7D
Методом научного тыка понял, что подобная бяка исправляется только если у header убрать position: fixed; (Да при этом нужно переделать ещё nav, но это не суть), однако хотелось бы, чтобы шапка оставалась зафиксированной. Кто-нибудь может, пожалуйста, подсказать как это реализовать (фиксированная шапка, но чтобы элементы после неё нормально "располагались")?
P.S. Или все дальнейшие элементы делать с position: absolute; ?
Заранее спасибо.