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.
@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>最佳答案
尝试将nav float设置在右边
header nav{float:right;}
关于html - 导航不正确 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47253298/