Nav element won't fully float to the right - css

Question

/* Generic Styles */
body {
background: #ffffff;
color: #222222;
font: 1em;
}
.container {
margin: auto;
width: 90%;
}
img {
max-width: 100%;
}
/* Layout Styles */
header {
background-image: url(../images/rocket.png);
background-repeat: no-repeat;
background-size: contain;
background-position: left;
background-color: #003151;
}
header img {
float: left;
margin-top: 30px;
}
header h3 {
clear: both;
}
nav {
float: right;
width: 100%;
font-size: 1.250em;
font-weight: bold;
text-transform: uppercase;
margin-top: 62px;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
display: block;
margin-right: 04%;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
}
<header>
<div class="container">
<img src="images/logo.png" alt="Logo" />
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Blog</li>
<li>FAQS</li>
<li>Contact</li>
</ul>
</nav>
<h3>BlahBlahBlahH3</h3>
<p>BlahBlahBlah</p>
Get in touch
</div>
<!-- End Container -->
</header>
<!-- End Header -->
Despite my best efforts it's as if the nav element has some kind of padding or margin (which it doesn't). If I set the width to 100% to stop the nav spilling onto two lines it then jumps beneath the logo instead of floating to the right on the same line as the logo. The code may be a little messy now from a lot of trial and error but can anyone explain why if I don't set the nav element to width 100% that the nav spills onto two lines or why if it is set to 100% it won't stay floated to the right?

Answer 1

Heyo,
It looks like your % margin is flubbing things up. If you're willing to part ways with that (suggested if you're going to be in such tight spaces where 4% will be very tiny), try this:
nav {
float: right;
font-size: 1.250em;
font-weight: bold;
text-transform: uppercase;
}
nav ul {
list-style: none;
float: right;
}
nav ul li {
float: left;
display: block;
margin-right: 20px;
}
Your nav is rather large, so at around the 900px breakpoint, you'll want to either reduce the font-size, or shift it all to float:left, so that when it goes below the logo it looks more natural.

Answer 2

Remove width: 100% from your nav.
Remove padding and margin from ul (added by browser as default)
Reduce font-size of nav items - if its too big of course the nav will wrap!
Note that your container has width of 90% - as the nav is within this, it won't reach the far right edge.
/* Generic Styles */
body {
background: #ffffff;
color: #222222;
font: 1em;
}
.container {
margin: auto;
width: 90%;
}
img {
max-width: 100%;
}
/* Layout Styles */
header {
background-image: url(../images/rocket.png);
background-repeat: no-repeat;
background-size: contain;
background-position: left;
background-color: #003151;
}
header img {
float: left;
margin-top: 30px;
}
header h3 {
clear: both;
}
nav {
float: right;
font-size: 1.250em;
font-weight: bold;
text-transform: uppercase;
margin-top: 62px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
display: block;
margin-right: 14px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
}
<header>
<div class="container">
<img src="images/logo.png" alt="Logo" />
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Blog</li>
<li>FAQS</li>
<li>Contact</li>
</ul>
</nav>
<h3>BlahBlahBlahH3</h3>
<p>BlahBlahBlah</p>
Get in touch
</div>
<!-- End Container -->
</header>
<!-- End Header -->