body {
  display: grid;
  grid-template-areas:
    "header header ads"
    "nav article article"
    "nav footer footer";
  grid-template-rows: 80px 1fr auto;
  grid-template-columns: 5% 1fr 25%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  background: #1d202f;
}
header,
footer,
article,
nav,
#siteAds,
#subNavbar {
  padding: 1.2em;
  background: #1d202f;
  color: #fff;
}
#header {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
  height: auto;
}
#mainArticle {
  grid-area: article;
}
#sideNav {
  grid-area: nav;
}
#siteAds {
  text-align: right;
  padding:10px;
  margin:0;
  grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body {
    grid-template-areas:
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  }
}