/*
  Allows for full-width sections on hourofcode.com pages.

  Should be used on pages that:
  - have a full-width hero banner
  - use a background color to delineate between sections
*/

/* Use semantic <section> elements instead of <div>s */
/* This is better for accessibility */
section {
  width: 100%;
  padding: 4rem 2rem;
}

/* Use class="wrapper" to house a section's content */
/* Content will be centered on the page while allowing
  for a full-width background color or image */
section .wrapper {
  max-width: 960px;
  margin: 0 auto;
}