为什么HTML布局的分辨率为769px？

Question

I am writing a basic web page template with html/css. The navigation's code is done from following a tutorial.

• At 769px the layout breaks, the page is not full width, being hidden. As follows:

Screenshot : https://imgur.com/a/QfjrbP8

Why is the layout breaking, I've looked at the navigation code? i can't find the issue, help! Please check 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; */
}

Updated the above code.

Please remove position: relative; and Left: 50% . Instead of float: left you can use float: right to align on the right side

  $("#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>