.container{
    display:grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 1.5fr 2.5fr 2fr 5fr 0.5fr;
    
}

.logo{
    grid-column: 1/4 ;
    grid-row: 1/5;
    background-color: rgb(255, 255, 255);
}

.header-banner{
    grid-column: 1/4;
    grid-row: 2/5;
    background-color:rgb(255, 255, 255)
}

.intro-text-area{
    grid-column: 1/4;
    grid-row: 3/5;
    background-color:rgb(255, 255, 255)
}

.box1{
    grid-column: 1/3;
    grid-row: 4/5;
    background-color: aqua;
}

.box2{
    grid-column: 2/3;
    grid-row: 4/5;
    background-color: crimson;
}

.box3{
    grid-column: 3/3;
    grid-row: 4/5;
    background-color: darkseagreen;
}

.footer{
    grid-column: 1/4;
    grid-row: 5/5;
    background-color: black;
}


body {
  margin: 0;
  padding: 0;
}

h2, p {
  margin: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #312092;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;

  
}