我有一個不斷增長尺寸的空白空間，但我對原因一無所知

Question

問題的圖片： 問題的圖片

如果你看一下之前的圖片，你會發現我那裡有一個巨大的空白空間。當我有我的正常顯示（大約1200像素）時，一切都很好。然而，當寬度被縮小時，那個空白空間總是增加，我不知道為什麼會這樣。

螢幕正常顯示的圖片： 正常顯示的圖片

我將上傳一部分HTML和CSS程式碼，以便清楚寫出程式碼。

.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);
}

<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>

Answer 1

我看到了問題。巨大的空白空間是由於max-width: 100%;屬性在.about-me div上引起的。這個屬性告訴瀏覽器將div的寬度設定為其容器的100%。然而，當容器的寬度減小時，div仍然會嘗試保持100%的寬度，這將產生一個空白空間。

要解決這個問題，你可以從.about-me div中刪除max-width: 100%;屬性。這將允許div根據其內容的寬度進行收縮，從而消除空白空間。