E타입 레이아웃

슬라이드 이미지를 똑같이 calc(100vh - 120px)로 바꿨는데 강의화면과는 다르게 나타나 질문 드립니다 ㅜ

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="shortcut"></div> <div class="news"></div> <div class="gallery"></div> <div class="slide-banner"></div> </div> <div class="right"> <div class="slide-img"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> </footer> </div> </body> </html>

@charset "UTF-8";

body{
    background-color: #fff;
    color: #333333;
    margin: 0;
}
a{
    text-decoration: none;
    color: #333333;
}


.contaniner{}
.main-content{
    display: flex;
}
.main-content>div{
    border: 1px solid black;
    
}
.left{
    width: 200px;
}
.center{
    width: 400px;
}
.right{
    flex: 1;
}

header{}
header>div{
    border: 1px solid red;
}
.header-logo{
    height: 100px;
}
.navi{
    height: 400px;
}
.spot-menu{
    height: 50px;
}

.slide-img{
    border: 1px solid green;
    height: calc(100vh  - 120px);
}

.shortcut{
    border: 1px solid blue;
    height: 150px;
}
.news{
    border: 1px solid blue;
    height: 250px;
}
.gallery{
    border: 1px solid blue;
    height: 250px;
}
.slide-banner{
    border: 1px solid blue;
    height: 150px;
}


footer{
    display: flex;
}
footer>div{
    border: 1px solid black;
    height: 120px;
}
.footer-logo{
    width: 200px;
}
.footer-content{
    flex: 1;
}
.footer-content>div{
    border: 1px solid black;
    height: 60px;
}
.footer-link{}
.copyright{}

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