navigation not floating correctly

Having some trouble getting my navigation to float correctly. It has a lot of space on the right of it once it hits the breakpoint. I have tried changing the padding and margin and have had no luck. I am pretty inexperienced so don't be too hard on me!! I am sure the answer is right at the tip of my nose.

see screenshot here

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');

*{
	box-sizing: border-box;
}

body{
	margin:0;
	font-family:'Raleway', sans-serif;
	text-align: center;
}

img {
	max-width: 100%;
	height: auto;
	
}
.container {
	width: 95%;
	margin: 0 auto;
}

/* TYPOGRAPHY */

.title {
	font-size: 2.5rem;
	text-shadow: 2px 2px #000;
}

.title span {
	font-weight: 300;
	display: block;
	font-size: .9em;
	margin-bottom: 1.5em;
}

@media (min-width: 60rem){
	.title{
		font-size: 3.7rem;
	}
	
	
}

/* BUTTONS */

.button {
	display: inline-block;
	font-size: 1.15rem;
	text-decoration: none;
	text-transform: uppercase;
	border-width: 2px;
	border-style: solid;
	padding: .5em 1.75em;
	
}

.button-accent{
	color: #000;
	border-color: #000;
	
}

.button-accent:hover,
button-accent:focus {
	background-image: url(../images/gold-texture-wallpaper-1.jpg);
	
	
	
}


/* HEADER */

header{
	position:absolute;
	margin-top:1em;
	left: 0;
	right: 0;
	margin: 1em;
}

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

nav li{
	
	display: inline-block;
	margin: 1em;
}

nav a{
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .8rem;
	padding: .5em;
	color: white;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

nav a:hover,
nav a:focus {
	color: #bf9b30;
}

@media(min-width: 60rem){
	.logo{
		float: left;
		width: 400px;
		height:auto;
		
	}
	
	.nav{
		float: right;
		
	}
}

/* HOME HERO */

.home-hero {
	background-image: url(../images/homehero.png);
	padding: 20em 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center;
	left: 0;
	right: 0;
	width: 100%;
	color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width. initial-scale=1">
<title>Alexander Sherman</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">

</head>

<body>
<header>
   <img src="images/logo.png" alt="Alexander Sherman logo" class="logo">
   <nav>
      <ul>
	     <li><a href="">Home</a></li>
	     <li><a href="">About</a></li>
	     <li><a href="">Content</a></li>
	   </ul>
   </nav>
</header>

<section class="home-hero">
   <div class="container">
      <h1 class="title"> Which door
         <span>will you unlock next?</span>
      </h1>
      <a href="" class="button button-accent">Meet Alexander</a>
   </div>
</section>

<section class="home-about">
   <div class="home-about-textbox">
   <h1>Who we are</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   
   <p><strong>Duis aute irure dolor in.</strong> Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
</section>

<section class="portfolio">
   <h1>Some of our work</h1>
   
   
   <figure class="port-item">
      <img src="images/portfolio1.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>
   
   <figure class="port-item">
      <img src="images/portfolio2.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>
   
   <figure class="port-item">
      <img src="images/portfolio3.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>
   
   <figure class="port-item">
      <img src="images/portfolio4.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>

   <figure class="port-item">
      <img src="images/portfolio5.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>

   <figure class="port-item">
      <img src="images/portfolio6.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>   
</section>

<footer>

<div class="col-4">
   <ul class="unstyled-list">
      <li><strong>Link 1</strong></li>
	  <li>Link 2</li>
	  <li>Link3</li>
	  <li>Link 4</li>
	  <li>Link 5</li>
   </ul>
</div> 

<div class="col-1">
   <ul class="unstyled-list">
      <li><strong>Link 1</strong></li>
	  <li>Link 2</li>
	  <li>Link3</li>
	  <li>Link 4</li>
	  <li>Link 5</li>
   </ul>
</div>

<div class="col-1">
   <ul class="unstyled-list">
      <li><strong>Link 1</strong></li>
	  <li>Link 2</li>
	  <li>Link3</li>
	  <li>Link 4</li>
	  <li>Link 5</li>
   </ul>
</div>

</footer>

</body>
</html>

1 answer

  • answered 2017-11-12 20:31 max

    Try to set nav float at right

    header nav{float:right;}