Nav bar won't float to the right correctly

Question

so I want my website to start with an 'h1' to the left and then at the same height position a menu on the right, but the 4 'li'items are always stacked on top of each other and just won't get into one single line, they're always in two. Don't know what I did wrong here, just can't find a solution.

thanks for any help already.

-HTML-

  <h1>Headline</h1>
  <nav class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="work/index.html">Portfolio</a></li>
        <li><a href="travel/index.html">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

-CSS-

 h1{
     padding: 0 4%;
     padding-top: 1%;
     text-transform: uppercase;
     float: left;
 }

 nav{
     float: right;
     padding-right: 2%;
     padding-top: 3%;
     width: auto;
 }

 .menu ul{
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .menu li{ 
      margin: 0 5%;
      float: left;
  }

 .menu li a {
     text-decoration: none;
     color: #666666;
     font-size: 25px;
     font-weight: bold;
     display: block;
     float: left;
 }

Answer 1

If you're willing to use Javascript, this should work for you:

(Complete JSFiddle demo here)

/*get the width of h1*/
var title = document.getElementById('title');
var titleS = title.currentStyle || window.getComputedStyle(title);
var titleW = title.offsetWidth + parseFloat(titleS.paddingLeft) + parseFloat(titleS.paddingRight);

var nav = document.getElementById('menu');
var navS = nav.currentStyle || window.getComputedStyle(nav);
var navP =  parseFloat(navS.paddingLeft) + parseFloat(navS.paddingRight);

/*set nav width by deducting title width from window width*/
nav.style.width = ((window.innerWidth - titleW) + navP)+'px';

console.log('(('+window.innerWidth+' - '+titleW+') + '+navP+'px)');

Answer 2

you can achieve this by set display:flex for your ul tag and remove all float properties of child(it won't works)

h1{
     padding: 0 4%;
     padding-top: 1%;
     text-transform: uppercase;
     float: left;
 }

 nav{
     float: right;
     padding-right: 2%;
     padding-top: 3%;
     width: auto;
 }

 .menu ul{
     display:flex;
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .menu li{ 
      margin: 0 5%;
  }

 .menu li a {
     text-decoration: none;
     color: #666666;
     font-size: 25px;
     font-weight: bold;
     display: block;
 }

<h1>Headline</h1>
  <nav class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="work/index.html">Portfolio</a></li>
        <li><a href="travel/index.html">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>