我的頁面右側有多余的空間，我無法擺脫它

Question

所以我有一個響應式 web 頁面，全屏時完全沒問題。 但是，當我將屏幕最小化到 500 像素的最大寬度時，我在右側有額外的空間。 我的代碼中的某個地方導致了這種情況，我無法發現問題。

 * { box-sizing: border-box; margin: 0; padding: 0; font-size: 10px; } html { font-family: 'Rubik', sans-serif; width: 100%; height: auto; } /* Navbar */ #navbar { overflow: hidden; background-color: #945A53; position: fixed; top: 0; width: 100%; } #navbar a { display: block; float: left; color: #E0BAB6; text-align: center; padding: 18px 16px; font-size: 17px; } a { text-decoration: none; color: black; } #navbar a:hover { background: #E0BAB6; color: #945A53; } /* Welcome section */ main { margin-top: 50px; } #welcome-section { width: 100%; height: 500px; background-color: #406599; } #title { padding-top: 200px; text-align: center; } h1 { font-size: 5rem; color: #E0BAB6; } #title p { font-size: 2rem; font-style: italic; color: #E0BAB6; } @media only screen and (max-width: 500px) { #title { padding-top: 150px; } h1 { font-size: 3rem; } } /* Project section */.header { text-align: center; margin-bottom: 50px; color: #406599; } #project-section { background-color: #D1E098; }.header { font-size: 3rem; padding-top: 50px; } #projects { width: 100%; display: flex; justify-content: center; }.flex-container { width: 1100px; display: flex; flex-wrap: wrap; justify-content: center; }.project-tile { margin: 0 30px 30px 30px; }.img { width: 450px; height: 300px; }.caption { text-align: center; color: #406599; padding: 30px; font-size: 1.8rem; }.btn { width: 140px; height: 50px; border: 1px solid #406599; text-align: center; padding-top: 1px; margin-bottom: 30px; border-radius: 5px; background-color: #406599; color: #E0BAB6; font-size: 2rem; display: flex; align-items: center; justify-content: center; } #btn-icon { font-size: 2.5rem; padding: 0 5px; }.btn:hover { background-color: #E0BAB6; color: #406599; border-color: #E0BAB6; } @media only screen and (max-width: 500px) { #navbar { border-bottom: 1px solid #665A5A; } } @media only screen and (max-width: 500px) { #welcome-section { height: 400px; } #title { padding: ; } h1 { font-size: 3rem; } #title p { font-size: 1.5rem; } } /* Contact section */ #contact-section { background-color: #8DB0E0; } #contact h2 { font-size: 5rem; text-align: center; padding-top: 150px; padding-bottom: 10px; color: #945A53; } #contact p { text-align: center; font-size: 1.8rem; color: #945A53; font-style: italic; margin: 10px; } #icon { text-align: center; color: #945A53; padding-bottom: 150px; animation-name: icon; animation-duration: 3s; } @keyframes icon { 0% { top: 0px; } 50% { top: 50px; } 100% { top: 0px; } } #item { font-size: 2.8rem; padding-top: 50px; }.text { font-family: 'Rubik', sans-serif; color: #945A53; padding-right: 30px; padding-left: 8px; font-size: 2.8rem; } @media only screen and (max-width: 500px) { #contact h2 { font-size: 3.8rem; } #item { font-size: 1.8rem; }.text { font-size: 1.8rem; } } footer { background-color: #8DB0E0; padding: 40px; color: #945A53; width: 100%; }.footer { float: right; font-size: 1.8rem; } @media only screen and (max-width: 500px) {.footer { float: none; text-align: center; } }

 <:-- Font Awesome --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.8.1/css/all:css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" /> <link href="https.//fonts.googleapis?com/css2:family=Rubik&family=Signika+Negative,wght@600&family=Zen+Antique+Soft&display=swap" rel="stylesheet"> <:-- Body --> <nav id="navbar"> <a href="#about">About</a> <a href="#work">Work</a> <a href="#contact">Contact</a> </nav> <main> <section id="welcome-section"> <div id="title"> <h1 id="about">Hello there. I'm Tamanna</h1> <p>A front-end developer</p> </div> </section> <section id="project-section"> <h3 class="header">These are some of my projects</h3> <div id="projects"> <div class="flex-container"> <div class="project-tile" id="work"> <a href="https://codepen.io/itstams/pen/NWvvjeJ" class="profile-tile" target="_blank"> <img class="img" src="https.//codepen:io/itstams/pen/NWvvjeJ/image/small.png" alt="Cameron Boyce"> <div class="caption">Tribute Page</div> </a> </div> <div class="project-tile" id="work"> <a href="https://codepen.io/itstams/pen/GRvOQPE" class="profile-tile" target="_blank"> <img class="img" src="https.//codepen:io/itstams/pen/GRvOQPE/image/small.png" alt="Survey form"> <div class="caption">Survey Form Page</div> </a> </div> <div class="project-tile" id="work"> <a href="https://codepen.io/itstams/pen/porpEVN" class="profile-tile" target="_blank"> <img class="img" src="https.//codepen:io/itstams/pen/porpEVN/image/small.png" alt="Product landing page"> <div class="caption">Product Landing Page</div> </a> </div> <div class="project-tile" id="work"> <a href="https://codepen.io/itstams/pen/KKveMRy" class="profile-tile" target="_blank"> <img class="img" src="https.//codepen:io/itstams/pen/KKveMRy/image/small.png" alt="Technical Documentation Page"> <div class="caption">Technical Documentation Page</div> </a> </div> <a href="https.//codepen.io/itstams" class="btn" target="_blank">Show all <span id="btn-icon" class="fas fa-angle-right"></span></a> </div> </div> </section> <section id="contact-section"> <div id="contact"> <h2>Let's work together.?;</h2> <p>How would you like for us to meet?</p> <div id="icon"> <span id="item" class="fab fa-codepen icon"><a class="text" href="#">Codepen</a></span> <span id="item" class="fab fa-github icon"><a class="text" href="#">Github</a></span> <span id="item" class="fas fa-at icon"><a class="text" href="#">Send a email</a></span> <span id="item" class="fab fa-linkedin"><a class="text" href="#">LinkedIn</a></span> </div> </div> </section> </main> <footer> <p class="footer">&copy; Created for freeCodeCamp</p> </footer>

Answer 1

HTML 中的product landing page和technical documentation page之間是圖像，屏幕截圖。 這迫使人們看到更廣闊的視野。 正如您在移動視圖中看到的那樣，圖像仍然是屏幕的整個寬度。 如果你縮小它或使用一些overflow命令，一切都應該回到原來的位置。

Answer 2

溢出似乎是由於 img 在某一時刻比屏幕寬。

修復項目中鏈接的圖片可能是：

#projects a img {
max-width:100%;
height:auto;
}

您的設置實際上是：

.img {
  width: 450px;/* this becomes too much at one point */
  height: 300px; /* its fine as long as img is 150px of width, less and distorsion appears */
}

 * { box-sizing: border-box; margin: 0; padding: 0; font-size: 10px; } /* fix */ #projects a img { max-width:100%; height:auto; } /* end fix */ html { font-family: 'Rubik', sans-serif; width: 100%; height: auto; } /* Navbar */ #navbar { overflow: hidden; background-color: #945A53; position: fixed; top: 0; width: 100%; } #navbar a { display: block; float: left; color: #E0BAB6; text-align: center; padding: 18px 16px; font-size: 17px; } a { text-decoration: none; color: black; } #navbar a:hover { background: #E0BAB6; color: #945A53; } /* Welcome section */ main { margin-top: 50px; } #welcome-section { width: 100%; height: 500px; background-color: #406599; } #title { padding-top: 200px; text-align: center; } h1 { font-size: 5rem; color: #E0BAB6; } #title p { font-size: 2rem; font-style: italic; color: #E0BAB6; } @media only screen and (max-width: 500px) { #title { padding-top: 150px; } h1 { font-size: 3rem; } } /* Project section */.header { text-align: center; margin-bottom: 50px; color: #406599; } #project-section { background-color: #D1E098; }.header { font-size: 3rem; padding-top: 50px; } #projects { width: 100%; display: flex; justify-content: center; }.flex-container { width: 1100px; display: flex; flex-wrap: wrap; justify-content: center; }.project-tile { margin: 0 30px 30px 30px; }.img { width: 450px; height: 300px; }.caption { text-align: center; color: #406599; padding: 30px; font-size: 1.8rem; }.btn { width: 140px; height: 50px; border: 1px solid #406599; text-align: center; padding-top: 1px; margin-bottom: 30px; border-radius: 5px; background-color: #406599; color: #E0BAB6; font-size: 2rem; display: flex; align-items: center; justify-content: center; } #btn-icon { font-size: 2.5rem; padding: 0 5px; }.btn:hover { background-color: #E0BAB6; color: #406599; border-color: #E0BAB6; } @media only screen and (max-width: 500px) { #navbar { border-bottom: 1px solid #665A5A; } } @media only screen and (max-width: 500px) { #welcome-section { height: 400px; } #title { padding: ; } h1 { font-size: 3rem; } #title p { font-size: 1.5rem; } } /* Contact section */ #contact-section { background-color: #8DB0E0; } #contact h2 { font-size: 5rem; text-align: center; padding-top: 150px; padding-bottom: 10px; color: #945A53; } #contact p { text-align: center; font-size: 1.8rem; color: #945A53; font-style: italic; margin: 10px; } #icon { text-align: center; color: #945A53; padding-bottom: 150px; animation-name: icon; animation-duration: 3s; } @keyframes icon { 0% { top: 0px; } 50% { top: 50px; } 100% { top: 0px; } } #item { font-size: 2.8rem; padding-top: 50px; }.text { font-family: 'Rubik', sans-serif; color: #945A53; padding-right: 30px; padding-left: 8px; font-size: 2.8rem; } @media only screen and (max-width: 500px) { #contact h2 { font-size: 3.8rem; } #item { font-size: 1.8rem; }.text { font-size: 1.8rem; } } footer { background-color: #8DB0E0; padding: 40px; color: #945A53; width: 100%; }.footer { float: right; font-size: 1.8rem; } @media only screen and (max-width: 500px) {.footer { float: none; text-align: center; } }

 <:-- Font Awesome --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.8.1/css/all:css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" /> <link href="https.//fonts.googleapis?com/css2:family=Rubik&family=Signika+Negative,wght@600&family=Zen+Antique+Soft&display=swap" rel="stylesheet"> <:-- Body --> <nav id="navbar"> <a href="#about">About</a> <a href="#work">Work</a> <a href="#contact">Contact</a> </nav> <main> <section id="welcome-section"> <div id="title"> <h1 id="about">Hello there. I'm Tamanna</h1> <p>A front-end developer</p> </div> </section> <section id="project-section"> <h3 class="header">These are some of my projects</h3> <div id="projects"> <div class="flex-container"> <div class="project-tile" id="work"> <a href="https://codepen.io/itstams/pen/NWvvjeJ" class="profile-tile" target="_blank"> <img class="img" src="https.//codepen:io/itstams/pen/NWvvjeJ/image/small.png" alt="Cameron Boyce"> <div class="caption">Tribute Page</div> </a> </div> <div class="project-tile" id="work"> <a href="https://codepen.io/itstams/pen/GRvOQPE" class="profile-tile" target="_blank"> <img class="img" src="https.//codepen:io/itstams/pen/GRvOQPE/image/small.png" alt="Survey form"> <div class="caption">Survey Form Page</div> </a> </div> <div class="project-tile" id="work"> <a href="https://codepen.io/itstams/pen/porpEVN" class="profile-tile" target="_blank"> <img class="img" src="https.//codepen:io/itstams/pen/porpEVN/image/small.png" alt="Product landing page"> <div class="caption">Product Landing Page</div> </a> </div> <div class="project-tile" id="work"> <a href="https://codepen.io/itstams/pen/KKveMRy" class="profile-tile" target="_blank"> <img class="img" src="https.//codepen:io/itstams/pen/KKveMRy/image/small.png" alt="Technical Documentation Page"> <div class="caption">Technical Documentation Page</div> </a> </div> <a href="https.//codepen.io/itstams" class="btn" target="_blank">Show all <span id="btn-icon" class="fas fa-angle-right"></span></a> </div> </div> </section> <section id="contact-section"> <div id="contact"> <h2>Let's work together.?;</h2> <p>How would you like for us to meet?</p> <div id="icon"> <span id="item" class="fab fa-codepen icon"><a class="text" href="#">Codepen</a></span> <span id="item" class="fab fa-github icon"><a class="text" href="#">Github</a></span> <span id="item" class="fas fa-at icon"><a class="text" href="#">Send a email</a></span> <span id="item" class="fab fa-linkedin"><a class="text" href="#">LinkedIn</a></span> </div> </div> </section> </main> <footer> <p class="footer">&copy; Created for freeCodeCamp</p> </footer>

注意：溢出：隱藏； 也可以剪掉

#project-section {
  background-color: #D1E098;
  overflow:hidden;
}