body  {
   display: grid;
   grid-template-columns: auto 100px;
}
 
header {
   grid-column-start: 1;
   grid-column-end:   3;
   grid-row-start: 1;
   grid-row-end: 2;  
  border: 2px solid red;       
}

nav {
   grid-column: 2 / 3;
   grid-row: 2 / 3;
  border: 2px solid red;   
}

section {
   grid-column: 1 / 2;
   grid-row: 2 / 3;
  border: 2px solid red;   
}

footer {
   grid-column: 1 / 3;
   grid-row: 3 / span 1;
  border: 2px solid red;   
}
 */
body 
 {
  display: grid; 
  grid-template-columns: auto 120px;      
}

header, nav, section, footer 
 {
  border: 2px solid red;  

}

header 
 {
   grid-column-start: 1;
   grid-column-end:  3;
   grid-row-start: 1;
   grid-row-end: 2;  
   
}

nav 
 {
   grid-column: 2 / 3;
   grid-row: 2 / 3;   
}

section 
 {
   grid-column: 1 / 2; // 1 / span 1
   grid-row: 2 / 3;    // 2 / span 1
}

footer 
 {
   grid-column: 1 / 2;
   grid-row: 3 / 4; 
} 
 
header, footer {
  font-family: Arial, sans-serif;
  color:white;
  background-color: black;
  text-align: center;


}  

nav a {
  font-family: Arial, sans-serif;
  color:white;
  background-color: black;
  display: inline-block;
  text-decoration: none;
  border: 5px outset black;
  padding: 2px 10px ;
  width: 82px;
  margin: 2px;
}

nav a:hover {
  color:white;
  background-color: green;
}

nav a:active {
  color:white;
  background-color: red;
  border: 5px inset black;  
}
 
    
table, th, td {
  font-family: Arial, sans-serif;
  border: 1px solid black;
  border-collapse: collapse;
 

}

td {
  text-align: center;
  width: 8%;
}

th, tr:nth-child(odd)  {
  background-color: #BBBBBB;

}