Just add to your topnav css selector:
display: flex;
justify-content: center;
So it becomes:
.topnav {
display: flex;
justify-content: center;
overflow: hidden;
background-color: #0f64aa;
}
You dont need 'overflow:hidden;' and you don't need 'float: left;' in your 'topnav a' css selector.
Using a table is not a great approach you could just use a <div></div>:
<div class="topnav">
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">AGENDA</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPEAKERS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">REGISTER</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPONSORS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">VENUE</a>
</div>
Correctly formated you would use a list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centered Navigation</title>
<style>
.topnav {
display: flex;
justify-content: center;
background-color: #0f64aa;
margin: 0;
padding: 0;
}
.topnav li {
list-style: none;
margin: 0;
padding: 0;
}
.topnav a {
color: #ffffff;
text-align: center;
padding: 15px;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
display: block;
}
.topnav a:hover {
background-color: #ffffff; color:
#0f64aa;
}
</style>
</head>
<body>
<ul class="topnav">
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">AGENDA</a></li>
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPEAKERS</a></li>
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">REGISTER</a></li>
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPONSORS</a></li>
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">VENUE</a></li>
</ul>
</body>
</html>
AdChoices