.header-area .navbar에 적용한 css에 대해서

Question

안녕하세요, 강의 잘 보고 있습니다.

.header-area > .navbar{
    width: calc(100%-120)px;
    margin: 0 60px;
    overflow: hidden;
}

이 내용에서

굳이 width에 다가 calc를 적용하면서 좌우의 120px을 빼주는 이유가 무엇인지 궁금합니다.

margin으로 양옆에 60px씩 주는것 때문에 width가 100%+120px이 되는 것이 문제라면,

차라리 padding을 양옆에 60px을 줘도 좌우 간격은 여백이 생길텐데요.

혹시 이유가 있으신지 해서 질문 올려봅니다.

Answer

안녕하세요. 답변을 늦게 드려서 죄송합니다.

말씀해주신대로 padding을 양옆에 60px씩 주게되면 navbar의 내부 공간에 가로 길이가 더해져서 총 가로길이가 100% + 120px가 되어 햄버거 메뉴가 옆으로 밀려서 보이지 않게 됩니다.

위와 같은 문제를 예방하고자 width를 100%에서 120px를 줄이고 margin을 양옆으로 60px씩 주어 가로 사이즈가 100%로 딱 떨어지게끔하여 화면에 맞도록 코드를 짰습니다.

감사합니다!

.header-area > .navbar에 적용한 css에 대해서