Rozjeżdżające się elementy

wersja skryptu MyBB: 1.8.7
adres forum: http://astranaar.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam. Zacząłem tworzyć styl podobny do tego z IPB 4.1 (zrzut ekranu) lecz napotkałem jeden mały problem. Chciałbym aby tło dzieliło się na dwie części więc dla #content nadałem jeden kolor dla body drugi. Problemem jest rozjeżdżające się menu i nawigacja. Na mojej rozdzielczości jest wszystko ok (zrzut ekranu) lecz na innych rozdzielczościach już nie (zrzut ekranu). Bardzo by mi zależało aby tło było dwukolorowe i dzieliło się pomiędzy nawigacją a contentem i aby menu i nawigacja się nie zmieniała. Jest na to jakiś sposób? Dorzucam także szablon nagłówka oraz css.

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            {$welcomeblock}
            <div id="logo">
                <div class="header-wrapper">
                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a>
                </div>
            </div>
        </div>
        <div class="menu">
            <ul>
                <a href="{$mybb->settings['bburl']}/index.php"><li class="active">Forum</li></a>
                <a href="{$mybb->settings['bburl']}/shoutbox.php"><li>Shoutbox</li></a>
                <a href="{$mybb->settings['bburl']}/showthread.php?tid=2"><li>Regulamin</li></a>
                <a href="{$mybb->settings['bburl']}/showthread.php?tid=3"><li>Taryfikator Kar</li></a>
                <a href="{$mybb->settings['bburl']}/search.php"><li style="float: right; margin-right: 10px;">Szukaj</li></a>
            </ul>
        </div>
        <navigation>
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                {$awaitingusers}
                <br />

.menu {
   background: #212121;
   font-size: 15px;
   border-radius: 3px 3px 0 0;
   padding: 0 0 0 10px;
   margin: auto auto;
   width: 91%;
}

.menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.menu li {
   color: #F0F8F7;
   display: inline-block;
   background: rgba(245,245,245,0.04);
   padding: 9px 25px;
   border-radius: 2px 2px 0px 0px;
   margin-top: 5px;
}

.menu li.active {
   color: #333333;
   display: inline-block;
   background: #fff;
   padding: 9px 25px;
   border-radius: 2px 2px 0px 0px;
   margin-top: 5px;
}

.menu li:hover {
   color: #333333;
   background: #fff;
}

Pierwsza sprawa - nie includuj wszystkich arkuszy dwa razy - popraw w headerinclude.

Druga - zwróć uwagę, że na menu oddziałuje obecnie width 91%, a na pozostałą część bodajże 85% jak dobrze pamiętam, z tym że ta pozostała część ma jeszcze ustalony max i min width w pixelach. Musisz to ujednolicić. Badanie elementu i ciśniesz dalej (tylko usuń doublowanie styli bo się zajedziesz )

1. Dla id content usuń padding (lub dodaj go przez box-sizing border-box).
2. Dla klasy wrapper zamień padding na: 10px 0px 10px 8px (wartości z navigation).
3. Dla klasy wrapper zamień width na 91% (ta sama co dla navigation).
4. Dla klasy wrapper usuń max i min width.

@Divir wielkie dzięki! ^^