Css Menü ortalayamıyorum

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

Arkadaşlar burda menu linki var aynısını kullanıyorum ama çözünürlüğe göre yazıların ortalanmasını istiyorum.

Float:left; olduğu için text-align:center; işe yaramıyor.

.topnav a {

display: inline-block;

color: #f2f2f2;

padding: 14px 3%;

text-decoration: none;

font-size: 17px;

}

+

<div class="topnav" id="myTopnav"><center>

<a href="#home" class="active">Home</a>

<a href="#news">News</a>

<a href="#contact">Contact</a>

<a href="#about">About</a>

<a href="javascript:void(0);" class="icon" onclick="myFunction()">

<i class="fa fa-bars"></i>

</a></center>

</div>

css i böyle yapınca ve div içine "<center>" ekleyince halloldu.

Konu kapatılabilir.