<div class="header">
  <p>Header</p>
</div>
<div class="body">
  <p>Body</p>
</div>
<div class="footer">
  <p>Footer</p>
</div>

/* Source Sans Pro */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:700);

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  color: white;
}

.header {
  width: 100vw;
  background-color: #faa237;
  padding: 0.8vw;
}

.body {
  width: 50vw;
  background-color: #f76f24;
  padding: 2vw;
}

.footer {
  width: 50vw;
  background-color: #f58a30;
  padding: 0.3vw;
}

/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
.header {
  width: 100vw;
  padding: 0.4vw;
}

.body {
  width: 50vw;
  padding: 5vw;
}

.footer {
  width: 50vw;
  padding: 0vw;
}
}

/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
  .header {
  width: 100vw;
  padding: 0.1vw;
}

.body {
  width: 50vw;
  padding: 0.5vw;
}

.footer {
  width: 50vw;
  padding: 0vw;
}
}