CSS가 적용이 안됩니다.

/* ABOUT AREA */
.about-area {
  height: auto;
  position: relative;
}

.about-area > .picture {
  display: block;
  text-align: center;
  padding: 20px;
}

@media (min-width: 992px) {
  .about-area > .picture {
    width: calc(40% - 40px);
    display: inline-block;
  }
}

.about-area > .picture > img {
  max-width: 300px;
  max-height: 300px;
  border-radius: 15px;
}

.about-area > .picture > .name {
  font-size: 25px;
  text-align: center;
  padding: 15px 0;
}

.about-area > .picture > .description {
  font-size: 14px;
  font-family: 'Noto Sans KR', sans-serif;
}

.about-area > .text {
  display: block;
  padding: 30px;
}

@media (min-width: 992px) {
  .about-area > .text {
    width: calc(60% - 100px);
    display: inline-block;
    padding: 0 50px; 
  }
}

.about-area > .text * {
  font-size: 16px;
}

4-2. CSS 강의에서

분명 똑같은 방식으로 붙여넣었지만 소개 글 및 정보란이 사진 오른쪽으로 가지 않습니다... 어떻게 해야할까요

안녕하세요, 인프런 AI 인턴입니다. 현태 유님, CSS가 제대로 적용되지 않아 어려움을 겪고 계신 것 같네요. 해당 문제를 해결하기 위해 몇 가지 점검해야 할 사항들을 안내드리겠습니다.

HTML 구조 확인: CSS의 .about-area > .picture와 .about-area > .text 클래스에 맞게 HTML 구조가 되어 있는지 확인해보세요. 두 요소가 같은 .about-area의 자식 요소로 있어야 미디어 쿼리에서 설정한 inline-block이 적용되어 사진 오른쪽으로 텍스트가 배치됩니다.
CSS 파일 연결 확인: CSS 파일이 HTML에 올바르게 연결되어 있는지 확인해보세요. <link> 태그를 통해 CSS 파일이 제대로 연결되지 않았다면 스타일이 적용되지 않을 수 있습니다.
미디어 쿼리 조건 확인: 화면 크기가 미디어 쿼리(min-width: 992px)에 해당하는지 확인하세요. 브라우저의 개발자 도구(주로 F12 키)를 이용하여 현재 화면 크기를 확인하고, 해당 조건이 만족될 때 CSS가 어떻게 적용되는지 점검할 수 있습니다.
캐시 문제 확인: 브라우저 캐시로 인해 스타일이 업데이트되지 않는 경우가 있습니다. 페이지를 강력하게 새로고침(Ctrl + Shift + R)을 하거나, 브라우저의 캐시를 삭제한 후 다시 확인해보세요.

아래 유사한 문제에 대한 답변과 이미지가 있어 추가적으로 도움이 될 것입니다. 이 질문 역시 비슷한 맥락에서 해결할 수 있습니다.

CSS가 올바르게 적용되지 않을 때 확인해야 할 점들

이 가이드를 통해 문제가 해결되기를 바랍니다. 여전히 문제가 지속되거나 추가적인 질문이 있다면, 자세한 HTML 코드 구조와 함께 재질문해 주세요. 지식공유자님께서 더 구체적인 도움을 드릴 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변