https://jsfiddle.net/5fmcdw1e/4
我正试图让它成为我的导航元素"；Home""学习"爱好；不要离开他们的位置。我目前正在使用@media，只是调整字体大小，但它最终会变得太小和/或在我希望它不移动时向下移动。我相信一些更聪明的人可以提供帮助，或者知道做这件事的最佳方式是什么
谢谢！(我对css和html也很陌生(非常感谢为我指明正确方向的任何帮助。
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Contact Me</title>
</head>
<body>
<header class='header'>
<div class='container'>
<img class="logo-kekw" src="icons/kekw.png" alt="kekw">
<nav>
<ul>
<li>
<a href='index.html'>Home</a>
</li>
<li>
<a href="#">Learning</a>
</li>
<li>
<a href="#box-title">Hobbies</a>
</li>
</ul>
</nav>
</div>
</header>
<div id="box">
<div id="box-title">
I am learning about:
</div>
<div id="content">box-models, box-sizing, margins, padding, @media, and more currently.</div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
</div>
<div id="box">
<div id="hobbies">
Hobbies:
</div>
<div id="content">Skateboarding, programming in html, css, javascript (yet to learn), python, biking, longboarding, hiking, snowboarding.</div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
</div>
<div id="container-footer">
<footer id="footer">
<ul id="ul-footer">
<li id="email"><a href="">Email me</a></li>
<li id="instagram"><a href="">Instagram</a></li>
<li id="kik"><a href="">Kik</a></li>
</ul>
</footer>
</div>
</body>
</html>
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li {
font-family: "proxima-nova", sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
.header {
font-size: 24px;
width: 100%;
height: 100px;
background-color: rgb(18 39 45);
position: fixed;
text-align: center;
line-height: 50px;
top: 0;
left: 0;
border-bottom: 1px solid turquoise;
}
.logo-kekw:hover {
border-radius: 50%;
}
.logo-kekw {
border-radius: 50%;
border: #62b862dc solid 2px;
padding: 1.8px 1.8px;
height: 75px;
width: 75px;
float: left;
margin-top: 9px;
margin-left: 42px;
}
.header nav {
float: right;
padding-right: 35px;
line-height: 50px;
}
.header nav ul li {
list-style: none;
display: inline-block;
margin-left: 25px;
}
.header nav ul li a:hover {
transition-duration: .3s;
color: white;
}
.header nav ul li a {
text-decoration: none;
color: #f67600;
font-size: 40px;
margin-left: 10px;
margin-right: 10px;
cursor: crosshair;
}
.header.shadow {
box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}
body {
height: 100%;
background-color: #100e17;
margin-top: 120px;
}
#box-title {
letter-spacing: 2px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-sizing: border-box;
margin: 0;
font-size: 28px;
font-weight: 600;
text-align: center;
color: white;
text-transform: uppercase;
margin-bottom: 25px;
margin-top: 15px
}
#box #content {
padding: 10px;
border: 2px solid black;
}
#hobbies {
box-sizing: border-box;
letter-spacing: 2px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
font-size: 28px;
font-weight: 600;
text-align: center;
color: white;
text-transform: uppercase;
margin-bottom: 25px;
margin-top: 15px
}
#box {
background-color: rgb(94 94 125 / 50%);
padding: 10px;
border: solid 2px black;
margin: auto;
width: 75%;
height: 400px;
box-sizing: border-box;
overflow: scroll;
margin-bottom: 150px;
}
#content {
margin-top: 10px;
font-size: 16px;
background-color: #62b862dc;
text-align: center;
/*green*/
}
#footer {
font-family: "Lucida Console", Courier, monospace;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(18 36 41);
border-top: 1px solid turquoise;
text-align: center;
height: 70px;
}
#footer ul li {
display: inline;
}
#footer ul li a {
text-decoration: none;
font-size: 32px;
margin-right: 10px;
font-family: "proxima-nova", sans-serif;
padding: .2em 1em;
color: #f67600;
background-color: black;
border: 1px solid white;
}
#footer ul li a:hover {
background-color: #f67600;
transition-duration: .3s;
color: black;
border: solid 1px white;
}
/*
#email a:hover {
background-color: black;
transition-duration: .1s;
color: #ffffff;
border: solid 2px;
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
padding-left: 3%;
padding-right: 3%;
}
*/
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
overflow: hidden;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #1aa260;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #7a00708c;
}
@media screen and (max-width: 900px) {
body {
font-size: 32px;
}
}
@media screen and (min-width: 695px) and (max-width: 950px) {
.header nav ul li a {
font-size: 20px;
}
}
@media screen and (min-width: 633px) and (max-width: 695px) {
.header nav ul li a {
font-size: 15px;
}
}
@media screen and (min-width: 400px) and (max-width: 632px) {
.header nav ul li a {
font-size: 8px;
}
}
在这里，您正在应用margin-left: 25px，这将导致在较小的屏幕上，这些链接将跳到父链接下面，因为它们没有足够的空间。与应用margin-left: 42px的页眉徽标相同。只需取此差值，然后再次检查结果。
如果您想摆脱这个问题，请查看flex-box或grid布局。互联网上有很多资源只是搜索。
我对您的问题的建议是保持固定的字体大小，当它向下移动时，您可以使用响应菜单栏，https://www.w3schools.com/howto/howto_js_topnav_responsive.asp。这样，《回家》、《学习与爱好》将永远可读。
我稍微更改了你的CSS代码(3次/*add*/(，这样你就可以看到我的意思了(调整大小，你会看到导航背景颜色从绿色变为红色(
.container {
width: 80%;
margin: 0 auto;
display: inline; /*add*/
}
.header {
font-size: 24px;
width: 100%;
height: 100px;
background-color: rgb(18 39 45);
position: fixed;
line-height: 50px;
top: 0;
left: 0;
border-bottom: 1px solid turquoise;
}
.logo-kekw:hover {
border-radius: 50%;
}
.logo-kekw {
border-radius: 50%;
border: #62b862dc solid 2px;
padding: 1.8px 1.8px;
height: 75px;
width: 75px;
float: left;
margin-top: 9px;
margin-left: 42px;
}
.header nav {
float: right;
padding-right: 35px;
line-height: 50px;
background-color: green; /*add*/
}
.header nav ul li {
list-style: none;
display: inline-block;
margin-left: 25px;
}
.header nav ul li a:hover {
transition-duration: .3s;
color: white;
}
.header nav ul li a {
text-decoration: none;
color: #f67600;
margin-left: 10px;
margin-right: 10px;
cursor: crosshair;
font-size: 30px;
}
.header.shadow {
box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}
body {
height: 100%;
background-color: #100e17;
margin-top: 120px;
}
#box-title {
letter-spacing: 2px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-sizing: border-box;
margin: 0;
font-size: 28px;
font-weight: 600;
text-align: center;
color: white;
text-transform: uppercase;
margin-bottom: 25px;
margin-top: 15px
}
#box #content {
padding: 10px;
border: 2px solid black;
}
#hobbies {
box-sizing: border-box;
letter-spacing: 2px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
font-size: 28px;
font-weight: 600;
text-align: center;
color: white;
text-transform: uppercase;
margin-bottom: 25px;
margin-top: 15px
}
#box {
background-color: rgb(94 94 125 / 50%);
padding: 10px;
border: solid 2px black;
margin: auto;
width: 75%;
height: 400px;
box-sizing: border-box;
overflow: scroll;
margin-bottom: 150px;
}
#content {
margin-top: 10px;
font-size: 16px;
background-color: #62b862dc;
text-align: center;
/*green*/
}
#footer {
font-family: "Lucida Console", Courier, monospace;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(18 36 41);
border-top: 1px solid turquoise;
text-align: center;
height: 70px;
}
#footer ul li {
display: inline;
}
#footer ul li a {
text-decoration: none;
font-size: 32px;
margin-right: 10px;
font-family: "proxima-nova", sans-serif;
padding: .2em 1em;
color: #f67600;
background-color: black;
border: 1px solid white;
}
#footer ul li a:hover {
background-color: #f67600;
transition-duration: .3s;
color: black;
border: solid 1px white;
}
/*
#email a:hover {
background-color: black;
transition-duration: .1s;
color: #ffffff;
border: solid 2px;
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
padding-left: 3%;
padding-right: 3%;
}
*/
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
overflow: hidden;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #1aa260;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #7a00708c;
}
@media screen and (max-width: 900px) {
body {
font-size: 32px;
}
}
@media screen and (max-width: 660px) { /*add*/
/*responsive menu bar*/
.header nav {
background-color: red;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Contact Me</title>
</head>
<body>
<header class='header'>
<div class='container'>
<img class="logo-kekw" src="icons/kekw.png" alt="kekw">
<nav>
<ul>
<li>
<a href='index.html'>Home</a>
</li>
<li>
<a href="#">Learning</a>
</li>
<li>
<a href="#box-title">Hobbies</a>
</li>
</ul>
</nav>
</div>
</header>
<div id="box">
<div id="box-title">
I am learning about:
</div>
<div id="content">box-models, box-sizing, margins, padding, @media, and more currently.</div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
</div>
<div id="box">
<div id="hobbies">
Hobbies:
</div>
<div id="content">Skateboarding, programming in html, css, javascript (yet to learn), python, biking, longboarding, hiking, snowboarding.</div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
<div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
</div>
<div id="container-footer">
<footer id="footer">
<ul id="ul-footer">
<li id="email"><a href="mailto:walnuts@email.com">Email me</a></li>
<li id="instagram"><a href="https://www.instagram.com/kickflips/">Instagram</a></li>
<li id="kik"><a href="https://kik.me/activism">Kik</a></li>
</ul>
</footer>
</div>
</body>
</html>只要对代码进行一些更改，就会使您更进一步：
.header nav {
float: right;
line-height: 50px;
}
去掉这里的填充，因为你有一个宽度为80%的div，这已经足够了。
ul {
display: inline-flex;
}
这将使您无法将列表项目包装起来。
@media screen and (max-width: 400px) {
.container, ul {
display: flex;
flex-flow: column wrap;
}
}
添加媒体查询以处理最小屏幕。
从这里开始，你有责任做出进一步的改进。遵循@codeHysteria的建议，并查看flexbox css。这将帮助您获得一个简单干净的页面网格。对于更复杂的网格，请使用css网格。