Holy Grail

Need to be centered

HTML

<body class="HolyGrail">
  <header>HEADER</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">CONTENT</main></main>
    <nav class="HolyGrail-nav">NAVIGATION</nav>
    <aside class="HolyGrail-ads">ASIDE</aside>
  </div>
  <footer>Footer</footer>
</body>

CSS

@charset "utf-8";
/* CSS Document */

body,td,th {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #676767;
}
a:hover {
	text-decoration: none;
	color: #272727;
}
a:active {
	text-decoration: none;
	color: #000000;
}






.HolyGrail{
 background: #DF222C
  
}
.HolyGrail-body {
  	display: flex;
  flex-direction: column;
 background: #DF191C
}

.HolyGrail-nav {
  order: -1;background: #2E3D6E
}

@media (min-width: 768px) {
  .HolyGrail-body {
    flex-direction: row;
    flex: 1;background: #2C9F23
  }
  .HolyGrail-content {
    flex: 1;
	  background: #D440CA
  }
  .HolyGrail-nav, .HolyGrail-ads {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
	  background: #A2A115
  }
}