Clear and clearfix hack

Author: Ronan

starter/04-CSS-Layouts/index.html

@@ -18,16 +18,16 @@ <h6>The Basic Language of the Web: HTML</h6>
     -->
 
     <div class="container">
-      <header class="main-header">
+      <header class="main-header clearfix">
         <h1>📘 The Code Magazine</h1>
-
         <nav>
           <!-- <strong>This is the navigation</strong> -->
           <a href="blog.html">Blog</a>
           <a href="#">Challenges</a>
           <a href="#">Flexbox</a>
           <a href="#">CSS Grid</a>
         </nav>
+        <!-- <div class="clear"></div> -->
       </header>
 
       <article>

starter/04-CSS-Layouts/style.css

@@ -21,6 +21,7 @@ body {
 }
 
 .main-header {
+  background-color:#f7f7f7;
   background-color: red;
   /* padding: 20px;
   padding-left: 40px;
@@ -284,4 +285,14 @@ h1 {
 
 nav {
   float: right;
+}
+
+.clear {
+  clear: both;
+}
+
+.clearfix::after {
+  clear: both;
+  content: '';
+  display: block;
 }