When i am centring this middle span, the right span containing buttons go down, basically i want to make a navbar where one a is at left three 'a' are at center and last two buttons are at the right, left and right float is clear but centering the elements is not working properly
**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**

```
[THIS IS THE ERROR THE BUTTONS ARE GOING DOWN WHILE CENTERING THE MID 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;
}

```