<p>問題的圖片： 問題的圖片</p> <p>如果你看一下之前的圖片，你會發現我那裡有一個巨大的空白空間。當我有我的正常顯示（大約1200像素）時，一切都很好。然而，當寬度被縮小時，那個空白空間總是增加，我不知道為什麼會這樣。 </p> <p>螢幕正常顯示的圖片： 正常顯示的圖片</p> <p>我將上傳一部分HTML和CSS程式碼，以便清楚寫出程式碼。 </p> <p><br /></p> <pre class="brush:css;toolbar:false;">.about-me{ margin-top: 10px; max-width: 100%; max-height: 100%; height: 100vh; } .about-me h1{ color: goldenrod; text-align: center; font-size: 52px; } .about-me .about{ display: flex; justify-content: center; align-items: center; } .about-me .about .text-container{ max-width: 70%; } .about-me .about .text-container p{ font-size: 24px; text-align: center; margin: 50px; } .about-me .about .text-container span{ color: goldenrod; font-weight: 900; } .border{ display: flex; justify-content: center; align-items: center; border: 1px solid goldenrod; background-color: goldenrod; border-radius: 50%; margin: 0 50px; max-width: 100%; } .about-me .border img{ max-width: 100%; max-height: 100%; border-radius: 50%; scale: 95%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }</pre> <pre class="brush:html;toolbar:false;"><div class="about-me" id="about-me"> <h1>我們是什麼？ </h1> <div class="about"> <div class="text-container"> <p>文本</p> <p>文本</p> <p>文本</p> </div> <div class="border"> <img src="img/arcos.jpg" alt=""> </div> </div> </div></pre> <p><br /></p>