CSS hamburger menu doesn't transform correctly on a bigger screen

Question

I have a CSS hamburger menu which should display on screens up to 525px big. After that size, the hamburger menu should transform into a normal menu, made out of 4 links, floated to the right of the page while the logo being floated to the left. Here's the complete code: https://codepen.io/Cilvako/pen/zjvBrE

<div class="nav">

         <h1>Zero Gravity</h1>

         <label for="toggle">&#9776</label>

         <input type="checkbox" id="toggle"/>

       <div class="menu">
           <a href="#">About Us</a>
           <a href="#">Contact</a>
           <a href="#">Blog</a>
           <a href="#"><span>Free Trial</span></a>
       </div>

    </div>

Although I make the containing div of the 4 links display: inline-block it still takes the whole width of the div, displaying under the h1 (logo).

How can I make the h1 and the menu (.menu) display next to eachother, having the same height? I'm really out of ideas.

Answer 1

Try this

CSS

@media only screen and (min-width: 525px)
.menu {
    text-align: right;
    display: inline-block;
    float: right;
    width: auto;
    clear: none;
}