body {
  margin: 20px;
}

    .nav {
        grid-area: nav;
    }

    .header {
        grid-area: header;
    }

    .article1 {
        grid-area: article1;
    }

    .article2 {
        grid-area: article2;
    }

    .article3 {
        grid-area: article3;
    }

    .article4 {
      grid-area: article4;
  }

    .section1 {
        grid-area: section1;
    }

    .section2 {
        grid-area: section2;
    }

    .section3 {
        grid-area: section3;
    }

    .section4 {
        grid-area: section4;
    }

    .footer {
        grid-area: footer;
    }

  .grid1 {
    display: grid;
    grid-gap: 20px;
    background-color: #fff;
    color: #444;
    grid-template-areas:
     "nav"
     "header"
     "article1"
     "article2"
     "article3"
     "article4"
     "section1"
     "section2"
     "section3"
     "section4"
     "footer"
  }

        .grid1 {
      grid-gap: 20px;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-areas:
            "nav   nav   nav   nav"
            "header   header   header   header"
            "article1   article2    article3   article4"
            "section1  section2  section2   section3"
            " section4   section4   section4   section4"
            "footer   footer   footer   footer";
        }

.box {
  background-color: #444;
  color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 15px;
  font-size: 150%; 
}


.footer {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  background-color: #999;
}

.header {
  text-align:  center;
  font-family: "Lucida Console";
  font-size: 40px;
  color: rgb(191, 63, 63);
  background-image: url(http://warringer.co/asap4d/images/ASAP4DHeader01.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  height: 655px ;
}

.article1,
.article2,
.article3,
.article4  {
  font-family: "Arial", sans-serif;
  font-size: 20px;
  background-color: #75AC98;
  color: #444;
}

.section1,
.section2,
.section3 {
  font-family: "Arial",sans-serif;
  font-size: 20px;
  background-color: #BCD6CD;
  color: #444;
}

.section4 {
  font-family: "Arial",sans-serif;
  font-size: 20px;
  background-color: #E5F0EC;
  color: #444;
  text-align:  center;
  padding: 30px;
}

h4 {
  font-family: "Arial", sans-serif;
  font-size: 20px;
  color: rgb(191,63,63);
  text-align:  center;
}