<body>
    <div id="wrap">
        <div id="header">
            <div class="container"></div>
        </div>
        <div id="nav">
            <div class="container"></div>
        </div>
        <div id="section">
            <div class="container"></div>
        </div>
        <div id="footer">
            <div class="container"></div>
        </div>
    </div>
</body>
*{
  margin: 0 auto;
}
#wrap {
  width: 100%;
}
#header {
  height: 100px;
  background-color: #E0F2F1;
}
#nav {
  height: 300px;
  background-color: #80CBC4;
}
#section {
  height: 580px;
  background-color: #26A69A;
}
#footer {
  height: 100px;
  background-color: #00796B;
}


/*
아이디/클래스 
#/.
한 번/두개 이상(중복 가능)

전체적인 틀, 스크립트 ---> id
세부적인 영역, 반복  ----> class
*/
.container {
  width: 1200px;
  height: inherit;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.3);
}
@media (max-width: 1220px){
  #wrap{
    width: 96%;
  }
}
@media (max-width: 768px){
  #wrap{
    width: 100%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.