계속해서 커지는 빈 공간이 있는데 그 이유를 모르겠습니다.

Question

질문 사진: 질문 사진

이전 이미지를 보시면 거기에 거대한 빈 공간이 있다는 것을 알 수 있습니다. 일반 디스플레이(약 1200픽셀)에서는 모든 것이 정상입니다. 그런데 폭을 줄이면 늘 그 빈 공간이 늘어나는데 왜 이런 일이 일어나는지 모르겠습니다.

화면에 정상적으로 표시되는 사진: 일반적으로 표시되는 사진

코드가 명확하게 작성될 수 있도록 HTML과 CSS 코드의 일부를 업로드하겠습니다.

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

    
우리는 무엇인가요? 
    

        

            
텍스트

            
텍스트

            
텍스트
        

        

            
        
    

Answer 1

문제가 보입니다. 거대한 빈 공간은 max-width: 100%;属性在.about-me div上引起的。这个属性告诉浏览器将div的宽度设置为其容器的100%。然而，当容器的宽度减小时，div仍然会尝试保持100%의 폭으로 인해 빈 공간이 생성됩니다.

이 문제를 해결하려면 내용의 너비에 따라 .about-me div中删除max-width: 100%;属性。这将允许div을 축소하여 빈 공간을 제거하면 됩니다.