Centrar elementos de una lista de forma independiente

[husseincak]

mmm, pues no se me centra individualmente, no cambia el tamaño del li. Pongo aqui el codigo:
Aqui el CSS:

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;}
 
#navprin a{  display:inline-block;  padding:15px;}
 
#navprin h1 {
    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;}
 
#navsec a{  display:inline-block;  padding:15px;}
 
#navsec h1 {
    display:inline;
    text-align:center;
    font-size:20px;
    color:#000;
    margin-top:10px;
}
 

Y por aquí el html5:

Código HTML:

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