Centrar elementos de una lista de forma independiente

[husseincak]

En este código no lo he puesto, pero el nuevo si, y sigue sin ir. :(

Y lo de los encabezados han sido unas teorias mias que me he montado en la cabeza y por lo visto me he liado, xD

Arreglado, para quien le interese, en el "li", he cambiado el "display:inline" por "display:inline-block".
Este es el código nuevo:

Código CSS:

#navbar {
    height:120px;
    margin:15px auto;
}
 
#navprin{  
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:25px;
    color:#000;
    background-color:#CCC;
}
 
#navprin li{ display:inline-block; width: 406px; text-align:center;}
 
#navprin a{ display:inline-block; padding:15px;}
 
#navprin .top {
    display:inline;
    text-align:center;
    font-size:25px;
    color:#000;
    margin-top:10px;
}
 
#navsec{  
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:25px;
    color:#000;
    background-color:#EEE;
}
 
#navsec li{  display:inline-block; width: 406px; text-align:center;}
 
#navsec a{  display:inline-block; padding:15px;}
 
#navsec .botton {
    display:inline;
    text-align:center;
    font-size:20px;
    color:#000;
    margin-top:10px;
}
 

Código HTML:

<div id="navbar" class="wrapper">
        
        <nav>
            <ul id="navprin">
                <li>
                    <a href="#"><div class="top">Timeline Principal</div></a>
                </li>
                
                <li>
                    <a href="#"><div class="top">Timeline Principal</div></a>
                </li>
                
                <li>
                    <a href="#"><div class="top">Timeline Oficial</div></a>
                </li>
            </ul>
        </nav>
        <nav>
            <ul id="navsec">
                <li>
                    <a href="#"><div class="botton">Todos</div></a>
                </li>
                
                <li>
                    <a href="#"><div class="botton">Privado</div></a>
                </li>
                
                <li>
                    <a href="#"><div class="botton">Categoria 1</div></a>
                </li>
            </ul>
        </nav>
    </div>