Navigation breaks into new line - html

Question

The navigation breaks into a second line as soon as I add "margin-right: 4%" in "nav li" - if I use px instead of % the problem won't occur, eg.: "margin-right: 10px" . I am not sure why this is happening
jsfiddle: http://jsfiddle.net/k93K2/
<header>
<div id="container">
<div id="logo">
<img src="http://placehold.it/220x80"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</div><!--container-->
</header>
--
.container {
max-width: 1070px;
margin: 0 auto;
}
header {
overflow: hidden;
}
#logo {
float: left;
}
nav {
float: right;
}
nav li {
display: inline;
text-align: center;
margin-right: 4%;
}

Answer 1

What about this ?
header{
width: 100%; /* initialization */
min-width: 590px; /* some min width */
}
.container {
max-width: 1070px;
margin: 0 auto;
}
header {
overflow: hidden;
}
#logo {
float: left;
}
nav {
width: calc(190px + 20%); /* width of nav is (4x5)% + size of "HomeServicesGalleryTeamContact" */
min-width: 370px; /* set some min width */
float: right;
}
nav li {
display: inline;
text-align: center;
margin-left: 4%;
}

Answer 2

For the problem with your code is margin and padding <ul> tag. So you need to remove margin and padding in <ul> like below:
nav {
float: left;
width: 220px;
}
ul {
margin: 0;
padding: 0;
}
Please try!

Answer 3

% takes value relative to it's container width....
so when you given 4% margin, then it applies to all li and pushes right margin to 4% according to container width!
To prevent content breaking into new line, i would suggest to apply white-space:nowrap to
example demo
header {
overflow: hidden;
white-space:nowrap; /*added*/
}
nav ul {
display:inline-block;
white-space:nowrap;/*added*/
border:1px solid red;
}