When attempting to center the middle span, the right span containing buttons shifts downward. I am trying to create a navigation bar with one link on the left, three links in the center, and two buttons on the right. While floating the elements on the left and right is working fine, achieving proper center alignment is proving difficult. HTML
<div class="topnav">
<span class="left">
<a href="">Hostingg</a>
</span>
<span class="topnav-cen">
<a href="#">Plans</a>
<a href="#">Find Domain</a>
<a href="#">Why Us?</a>
</span>
<span class="right">
<button>Sign In</button>
<button>Join Waitlist</button>
</span>
</div>
CSS
[THE ISSUE IS THE BUTTONS SHIFTING DOWN WHEN CENTERING THE MIDDLE DIV][1]
.topnav{
overflow: hidden;
position: relative;
}
.topnav a{
text-decoration: none;
float: left;
}
.topnav-cen {
display: table;
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}