Dopasowanie paska menu

wersja skryptu MyBB:1.6.14
adres forum:kbhl.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):Witam, po dodaniu ikonek font awesome, mój pasek menu (mam na myśli ten będący najwyżej) trochę się poszerzył i jakby 'rozregulował'. Rozumiem, że za to odpowiada global.css, proszę mi napisać tylko, które linijki zmienić i na jakie, aby wyglądał ładnie i równo (tak, jak tutaj: klik)

/* CSS3 menu */
.css3-menu{
    background: 
url(images/leaf/menu_bg.png);   margin: 0 0 0 -4px; 
 font-size: 13px; font-family: Tahoma; font-weight: bold
}

.css3-menu>ul{
    line-height: 40px;
    padding: 0 0 0 4px;
}

.css3-menu>ul>li{
    list-style: none;
    display: inline;
    margin: 0 0 0 -4px;
    position: relative;
}

.css3-menu>ul>li>a>i{
    font-size: 13px;
}

.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
    display: inline-block;
    padding: 5px 18px;
    height: 40px;
    color: #EFEFEF;
    text-decoration: none;
}

.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    background: #032e02;    color: #fff;
    display: inline;
    padding: 18px;
}

.dropdown{
    display: none;
    position: absolute;
    left: 0;
    top: 36px;
    background: #262626;
    font-size: 13px;
}

.dropdown>li{
    display: block;
    list-style: none;
}

.dropdown>li>a:link, .dropdown>li>a:visited{
    display: block;
    color: #EFEFEF;
    width: 140px;
    text-decoration: none;
    padding: 3px 15px;
    border-bottom: dashed 1px #676767;
}

.dropdown>li>a:hover, .dropdown>li>a:active{
    background: #032e02;
    color: #fff;
    border-bottom: solid 1px #032e02;
}

.dropdown2 {
    display: none;
    position: absolute;
    left: 0;
    top: 36px;
    background: #262626;
    font-size: 16px;
}

.dropdown2>li{
    display: block;
    list-style: none;

.css3-menu>ul>li.resp-menu{
display: none !important;
}

/* Media Queries */
@media only screen and (min-width : 580px) and (max-width : 800px){
    html, body{
        font-size: 18px;
}

.container{
        width: 96%;
        min-width: 580px;
        margin: 10px auto;
}

/* CSS3 menu */
    .css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
        padding: 0 12px;
}

.dropdown{
        top: 30px;
        font-size: 16px;
}

.dropdown>li>a:link, .dropdown>li>a:visited{
        padding: 0 10px;
}


}

@media only screen and (min-width : 1px) and (max-width : 579px){
    html, body{
        font-size: 16px;
}

.container{
        width: 99%;
        min-width: 177px;
        margin: 5px auto;
}

/* CSS3 menu */
    .css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
        padding: 0 16px;
}

.dropdown{
        top: 28px;
        font-size: 16px;
}

.dropdown>li>a:link, .dropdown>li>a:visited{
        width: 100px;
        padding: 0px 10px;
        line-height: 25px;
}

.css3-menu>ul>li.menu-li{
display: none;
}

.css3-menu>ul>li.resp-menu{
display: inline !important;
} 


Mój wcześniejszy wątek, na podobny temat: klik, może się przyda, pozdrawiam.

Znajdź w global.css klasę .css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited i dodaj do niej atrybut:

vertical-align: middle;

Spowoduje to wyrównanie odwiedzonego linka w pionie.

Następnie w pliku font-awesome.css znajdź klasę .fa i usuń z niej atrybut

line-height: 1;

Bo przez niego ikonka domu w przycisku jest wyrównana do góry, zamiast do środka.

Ponadto w global.css w klasie .dropdown polecam zmienić wartość atrybutu Top z 36px na 34px, bo aktualnie masz przerwę mjiędzy przyciskiem Regulaminy a rozwijanym menu.

Tak powinien wyglądać efekt końcowy: http://screencloud.net/v/umf9

Wcześniej kombinowałem na własną rękę i po ukończeniu wszystkich kroków, jakie podałeś, wygląda tak, że podświetlenie nieco wystaje, co mnie lekko irytuje. Mógłbym prosić o pomoc, nt. tego, jak je wyrównać?
Edit: w dodatku to podświetlenie ikonki 'home' jest jakieś węższe

menu.css →

.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active

zamień na:

.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    background: #032e02;
    color: #fff;
    display: inline-block;
    padding: 5px 18px;
    height: 40px;

}