project 섹션의 project-info padding 값 질문입니다

Question

강의에서 배운것을 토대로 포트폴리오 사이트를 제작하고 있습니다.

그중에서 프로젝트 슬라이더 부분을 만들고 있는데.

아래 강의에서 만든 코드를 그대로 이런식으로 옴기면 padding값에 의해 25%비율이 커지면서 project photo 부분이 흘러내려가더라고요. 왜냐하면 padding이 안에 크기값을 추가하니깐요. 생각해보니 이게 당연한 것 같은데

.project-info {
  width: 25%;
padding: 50px;
}
.project-photo {
  width: 75%;
  overflow: hidden;
}

그런데 강의에서는 25%비율은 깨지지 않고 유지하면서 padding값이 주어지는데

그 이유가 뭔가요?

Answer

제가 신규 강의 오픈 준비하느라 좀 바빠서 질문을 늦게 봤어요. 죄송해요.

.project-info랑.project-photo의 너비 합이 100%이니까 그 안에 준 패딩값을 포함시키는 box-sizing: border-box를 주시면 쉽게 해결될거에요.