listeye float verildiğinden ortalanmıyor.
Listelerde float yerine alternatif olarak

display:inline-block;

kullanabilirsiniz.

ul.topnav li {display:inline-block;}

yaptıktan sonra artık
artık ul etiketini sağa-ortaya-sağa hizalayabilirsiniz.

  text-align:center;

Şuradan değiştirilmiş haline bakabilirsiniz.
http://www.w3schools.com/code/tryit....e=FB3EJC6B8KOM

Ayrıca yukardaki arkadaşın verdiği yöntem ile mobil boyuta geldiğinde menü de bozulmalar meydana geliyor.