body {
  max-width: 1100px;
  margin: 8px auto;
  background-image: url("img/bg.gif");
  display: grid;
  grid-template-columns: 100px, 800px, 120px;
  gap: 16px;
}

.box {
  color: #0ff;
  background: #222;
  padding: 1px;
  border: 1px solid #0ff;
}

.box a {
  color: #0f0;
  text-decoration: none;
}

#header {
  grid-column: span 3 / span 3;
  text-align: center;
}

#nav {
  padding: 1em 0 0 0;
  grid-column-start: 1;
  grid-row-start: 2;
  text-align: center;
  width: 100px;
}

#main {
  grid-column-start: 2;
  grid-row-start: 2;
  padding: 0 1em;
}

#badges {
  grid-column-start: 3;
  grid-row-start: 2;
}

#footer{
  grid-column: span 3 / span 3;
  grid-column-start: 1;
  grid-row-start: 3;
}