0
ナビゲーションが正しく浮動するのに問題があります。一旦ブレークポイントに達すると、右には のスペースがたくさんあります。私は パディングと余白を変更しようとしていると運がなかった。私は だから私はあまりにも難しいことはありません！私は答えが は私の鼻の先端にあると確信しています。ナビゲーションが正しく浮動しない
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
*{
\t box-sizing: border-box;
}
body{
\t margin:0;
\t font-family:'Raleway', sans-serif;
\t text-align: center;
}
img {
\t max-width: 100%;
\t height: auto;
\t
}
.container {
\t width: 95%;
\t margin: 0 auto;
}
/* TYPOGRAPHY */
.title {
\t font-size: 2.5rem;
\t text-shadow: 2px 2px #000;
}
.title span {
\t font-weight: 300;
\t display: block;
\t font-size: .9em;
\t margin-bottom: 1.5em;
}
@media (min-width: 60rem){
\t .title{
\t \t font-size: 3.7rem;
\t }
\t
\t
}
/* BUTTONS */
.button {
\t display: inline-block;
\t font-size: 1.15rem;
\t text-decoration: none;
\t text-transform: uppercase;
\t border-width: 2px;
\t border-style: solid;
\t padding: .5em 1.75em;
\t
}
.button-accent{
\t color: #000;
\t border-color: #000;
\t
}
.button-accent:hover,
button-accent:focus {
\t background-image: url(../images/gold-texture-wallpaper-1.jpg);
\t
\t
\t
}
/* HEADER */
header{
\t position:absolute;
\t margin-top:1em;
\t left: 0;
\t right: 0;
\t margin: 1em;
}
nav ul{
\t margin: 0;
\t padding: 0;
\t list-style: none;
}
nav li{
\t
\t display: inline-block;
\t margin: 1em;
}
nav a{
\t font-weight: 900;
\t text-decoration: none;
\t text-transform: uppercase;
\t font-size: .8rem;
\t padding: .5em;
\t color: white;
\t text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
nav a:hover,
nav a:focus {
\t color: #bf9b30;
}
@media(min-width: 60rem){
\t .logo{
\t \t float: left;
\t \t width: 400px;
\t \t height:auto;
\t \t
\t }
\t
\t .nav{
\t \t float: right;
\t \t
\t }
}
/* HOME HERO */
.home-hero {
\t background-image: url(../images/homehero.png);
\t padding: 20em 0;
\t background-repeat: no-repeat;
\t background-size: cover;
\t background-position:center;
\t left: 0;
\t right: 0;
\t width: 100%;
\t 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>
\t <li><a href="">Home</a></li>
\t <li><a href="">About</a></li>
\t <li><a href="">Content</a></li>
\t </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>
\t <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>
\t <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>
\t <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>
\t <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>
\t <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>
\t <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>
\t <li>Link 2</li>
\t <li>Link3</li>
\t <li>Link 4</li>
\t <li>Link 5</li>
</ul>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Link 1</strong></li>
\t <li>Link 2</li>
\t <li>Link3</li>
\t <li>Link 4</li>
\t <li>Link 5</li>
</ul>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Link 1</strong></li>
\t <li>Link 2</li>
\t <li>Link3</li>
\t <li>Link 4</li>
\t <li>Link 5</li>
</ul>
</div>
</footer>
</body>
</html>