계속해서 커지는 빈 공간이 있는데 그 이유를 모르겠습니다.
<p>질문 사진:
질문 사진</p>
<p>이전 이미지를 보시면 거기에 거대한 빈 공간이 있다는 것을 알 수 있습니다. 일반 디스플레이(약 1200픽셀)에서는 모든 것이 정상입니다. 그런데 폭을 줄이면 늘 그 빈 공간이 늘어나는데 왜 이런 일이 일어나는지 모르겠습니다. </p>
<p> 화면에 정상적으로 표시되는 사진:
일반적으로 표시되는 사진</p>
<p>코드가 명확하게 작성될 수 있도록 HTML과 CSS 코드의 일부를 업로드하겠습니다. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.about-me{
여백 상단: 10px;
최대 너비: 100%;
최대 높이: 100%;
높이: 100vh;
}
.소개-나 h1{
색상: 갈조색;
텍스트 정렬: 중앙;
글꼴 크기: 52px;
}
.about-나 .about{
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
}
.about-나 .about .text-container{
최대 너비: 70%;
}
.about-me .about .text-container p{
글꼴 크기: 24px;
텍스트 정렬: 중앙;
여백: 50px;
}
.about-me .about .text-container 범위{
색상: 갈조색;
글꼴 두께: 900;
}
.국경{
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
테두리: 1px 단색 갈조색;
배경색: 갈조색;
테두리 반경: 50%;
여백: 0 50px;
최대 너비: 100%;
}
.about-me .border img{
최대 너비: 100%;
최대 높이: 100%;
테두리 반경: 50%;
규모: 95%;
상자 그림자: 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="테두리">
<img src="img/arcos.jpg" alt="">
</div>
</div>
<p><br /></p>
