body {
  background-color: pink;
  display: grid;
  justify-items: center;
}

h1 {text-align: center;}

a {
  text-decoration: none;
  color: deeppink;
}

main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  justify-items: stretch;
  width: 25vw;
  background-color: AntiqueWhite;
  border: solid SaddleBrown 2px;
  padding: 20px;
}

main img {
  width: 100%;
}

header, footer {
  grid-column: auto / span 12;
}

.nav-box {
  grid-column: auto / span 6;
  border: dotted pink 2px;
  padding: 5px 10px 5px 10px;
  background-color: AntiqueWhite;
}

.nav-box:hover {
  background-color: deep-pink;
}