<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>

* {
  margin: 0;
  padding: 0;
}
#header {
  height: 100px;
  background-color: #e0f2f1;
}
#nav {
  height: 300px;
  background-color: #80cbc4;
}
#section {
  height: 580px;
  background-color: #26a69a;
}
#footer {
  height: 100px;
  background-color: #00897b;
}
/* 
id/class
#/.
한 번/두 번 이상(중복가능)
전체적인 틀, 스크립트 --> ID사용
세부적인 영역, 반복 --> class 사용
*/
.container {
  width: 1200px;
  height: inherit;  /*부모한테 이미 있기 떄문에 상속 받음*/
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.3);
}
@media (max-width: 1220px){
  .container {
    width: 96%;
  }
}
@media (max-width: 768px){
  .container {
    width: 100%;
  }
}