Padding fantasma (imagen ilustrativa en el post)

[Sirius381]

Buenas noches foro!

Tengo un problema que me esta volviendo loco, he eliminado el codigo HTML y CSS dos veces para empezar de cero y no hay forma de dar con el problema, la cosa esta si, tengo en a parte superior de mi web un cintillo superior que trae unos enlaces en una lista <ul>, es decir son elementos <li> dentro de estos elementos van ya propiamente los enlaces <a> hasta ahi todo bien, el problema viene cuando voy a intentar centrar existe un padding superior que va de la parte superior del cintillo a donde empieza el <li> entonces si pongo un padding digamos del 3% este parte de ese punto, es decir no parte desde el comienzo del cintillo, adjunto una imagen para describir mejor mi problema (siento que me enredo y no explico nada)



Les paso el codigo CSS a ver si ustedes ven algo que estoy pasando por alto, desde ya muchisimas gracias!!

Código:

body
{
    margin:1%;
    height: 100%;
    background-color: #0f1c25;
    /*border: transparent 1px;*/
}

#imageLeft
{
    float:left;
}

#imageRight
{
    float:left;
}

#upperBelt
{
    font-family: "New Century Schoolbook", serif;
    width:98%;
    height:63px;
    float:left;
    background-color:#547b7f; 
    display:inline;
    outline: 1px solid #FFF;
}

#upperBelt li
{
    height: 32px;
    width: 126px;
    font-family: Arial;
    list-style:none;
    float:right;
    color:#FFF;
    text-decoration: none;
    margin-left: 1%;
    margin-right: 1%;
    border: solid red 1px;
}

#upperBelt li a
{
    font-family: Arial;
    float:right;
    color:#FFF;
    text-decoration: none;
    list-style: none;   
    border: solid gold 1px;
}