我有一個不斷增長尺寸的空白空間,但我對原因一無所知
<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>