Nav element won't fully float to the right

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">

    <a href="#" title="Home page"><img src="images/logo.png" alt="Logo" /></a>

    <nav>
      <ul>
        <li><a href="#" title="Home page" class="current">Home</a></li>
        <li><a href="portfolio" title="See some of my featured work">Portfolio</a></li>
        <li><a href="services" title="Learn more about my services">Services</a></li>
        <li><a href="about" title="Learn more about me">About</a></li>
        <li><a href="blog" title="View latest posts">Blog</a></li>
        <li><a href="faqs" title="View latest FAQS">FAQS</a></li>
        <li><a href="contact" title="Get in touch">Contact</a></li>
      </ul>
    </nav>

    <h3>BlahBlahBlahH3</h3>

    <p>BlahBlahBlah</p>

    <a href="#" class="btn" title="Get in touch">Get in touch</a>

  </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

1. Remove width: 100% from your nav.
2. Remove padding and margin from ul (added by browser as default)
3. Reduce font-size of nav items - if its too big of course the nav will wrap!
4. 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">

    <a href="#" title="Home page"><img src="images/logo.png" alt="Logo" /></a>

    <nav>
      <ul>
        <li><a href="#" title="Home page" class="current">Home</a></li>
        <li><a href="portfolio" title="See some of my featured work">Portfolio</a></li>
        <li><a href="services" title="Learn more about my services">Services</a></li>
        <li><a href="about" title="Learn more about me">About</a></li>
        <li><a href="blog" title="View latest posts">Blog</a></li>
        <li><a href="faqs" title="View latest FAQS">FAQS</a></li>
        <li><a href="contact" title="Get in touch">Contact</a></li>
      </ul>
    </nav>

    <h3>BlahBlahBlahH3</h3>

    <p>BlahBlahBlah</p>

    <a href="#" class="btn" title="Get in touch">Get in touch</a>

  </div>
  <!-- End Container -->

</header>
<!-- End Header -->