为什么HTML布局突破769px

Question

我正在用html/css编写一个基本的网页模板。导航的代码是根据教程完成的。

• 在769px处，布局中断，页面不是全宽，被隐藏。如下所示：

屏幕截图：https://i.stack.imgur.com/jwymU.jpg

为什么布局会被破坏，我已经看过导航代码了我找不到问题，救命请检查769px

$("#toggle").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});

html {
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
}
body {
font-size: 2.2rem;
}
.sec {
padding: 2.2rem;
}
/*
Navigation
*/
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}

body {
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
}

.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.content h1 {
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
}

nav {
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
}

nav #brand {
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
}

nav #brand a {
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
}

nav #menu {
float: left;
left: 50%;
position: relative;
}

nav #menu li {
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
}

nav #menu li a {
color: #fff;
font-family: "Poppins";
font-weight: 200;
}

#toggle {
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}

#toggle .span {
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
}

#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
opacity: 0;
}

#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

#resize {
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
}

#resize #menu {
height: 90px;
display: table-cell;
vertical-align: center;
}

#resize #menu li {
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}

#resize li:nth-child(1) {
margin-top:140px;
}

#resize #menu li a {
color: #fff;
}

#resize.active {
visibility: visible;
opacity: 0.99;
}


@media(max-width: 768px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
}

nav #brand {
margin-left: 18px;
}

#menu a {
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
}

nav #menu {
display: none;
}
}

@media(min-width: 768px) {
#resize {
visibility: hidden !important;
}
}
/* 
Hero Section
*/
.hero-wrap {
background-color: #b072d4;
color:#ffffff;
height: 100vh;
}
#hero-icon {
position: absolute;
top: 34.5rem;     
opacity: 0.8; 
width:100%;
right:0;
background: url('hero-icon-4.png')  right bottom;;
height: 300px;
background-repeat: no-repeat;
}

#hero-icon button {
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
}
.hero-wrap h1 {
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
}
.hero-wrap h2 {
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
}

/*
SECTION 1
*/
.section-1 {
display: flex;

flex-direction:column-reverse;
text-align: center;
}
.sec1-row {
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
}
.section1-images {
width: 50%;
}
.row-content {
font-size: 1.6rem;
padding: 2rem 1rem;
}
/*
Section 2
*/
.section-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;  
margin:auto;
background-color: #00e8ff;

}
.section-2 .icon-img {
width: 50%;
}
.icon-box {
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
}

<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">   
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row"> 
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>                        
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row"> 
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script src="js/script.js"></script> 
</body>
</html>

Answer 1

nav #menu {
float: right;
/* float: left;
left: 50%;
position: relative; */
}

更新了上述代码。

请删除position: relative;和Left: 50%。代替float: left，您可以使用float: right在右侧上对齐

$("#toggle").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});

html {
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
}
body {
font-size: 2.2rem;
}
.sec {
padding: 2.2rem;
}
/*
Navigation
*/
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}

body {
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
}

.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.content h1 {
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
}

nav {
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
}

nav #brand {
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
}

nav #brand a {
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
}

nav #menu {
float: right;
/* float: left;
left: 50%;
position: relative; */
}

nav #menu li {
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
}

nav #menu li a {
color: #fff;
font-family: "Poppins";
font-weight: 200;
}

#toggle {
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}

#toggle .span {
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
}

#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
opacity: 0;
}

#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

#resize {
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
}

#resize #menu {
height: 90px;
display: table-cell;
vertical-align: center;
}

#resize #menu li {
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}

#resize li:nth-child(1) {
margin-top:140px;
}

#resize #menu li a {
color: #fff;
}

#resize.active {
visibility: visible;
opacity: 0.99;
}


@media(max-width: 768px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
}

nav #brand {
margin-left: 18px;
}

#menu a {
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
}

nav #menu {
display: none;
}
}

@media(min-width: 768px) {
#resize {
visibility: hidden !important;
}
}
/* 
Hero Section
*/
.hero-wrap {
background-color: #b072d4;
color:#ffffff;
height: 100vh;
}
#hero-icon {
position: absolute;
top: 34.5rem;     
opacity: 0.8; 
width:100%;
right:0;
background: url('hero-icon-4.png')  right bottom;;
height: 300px;
background-repeat: no-repeat;
}

#hero-icon button {
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
}
.hero-wrap h1 {
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
}
.hero-wrap h2 {
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
}

/*
SECTION 1
*/
.section-1 {
display: flex;

flex-direction:column-reverse;
text-align: center;
}
.sec1-row {
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
}
.section1-images {
width: 50%;
}
.row-content {
font-size: 1.6rem;
padding: 2rem 1rem;
}
/*
Section 2
*/
.section-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;  
margin:auto;
background-color: #00e8ff;

}
.section-2 .icon-img {
width: 50%;
}
.icon-box {
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
}

<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">   
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row"> 
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>                        
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row"> 
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script src="js/script.js"></script> 
</body>
</html>