---
---

header , section {
  display: flex;
  height: 600px;
  background-color: #CCF;
  flex-direction: column;
}

nav {
  text-align: center;
}

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

hgroup {
  margin: auto;
}

h1 {
  text-align: center;
  font-size:  5rem;
  margin:     auto;
}

h2 {
  text-align: center;
  color: #555;
}

p {
  max-width: 400px;
}

li {
  background-color: #EEE;
  padding: 30px;
  width: 300px;
  margin: 5px;
  display: inline-block;
}

---
---

header , section {
  display: flex;
  height: 100vh;
  min-height: 480px;
  background-color: #CCF;
  flex-direction: column;
}

nav {
  text-align: center;
}

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

hgroup {
  margin: auto;
}

h1 {
  text-align: center;
  font-size:  5rem;
  margin:     auto;
}

h2 {
  text-align: center;
  color: #555;
}

p {
  max-width: 400px;
}

li {
  background-color: #EEE;
  padding: 30px;
  width: 300px;
  margin: 5px;
  display: inline-block;
}

Make the sections use the full viewport.
Make the sections use the full viewport.
