Added margins and paddings to the elements. Added global reset of margins and paddings, using the universal selector in css.

Author: mirmak4

starter/03-CSS-Fundamentals/index.html

@@ -29,7 +29,7 @@ <h1>📘 The Code Magazine</h1>
         </header>
 
         <article>
-            <header>
+            <header class="post-header">
                 <h2>The Basic Language of the Web: HTML</h2>
 
                 <img

starter/03-CSS-Fundamentals/style.css

@@ -1,5 +1,7 @@
 * {
     /* border-top: 10px solid #1098ad; */
+    margin: 0;
+    padding: 0;
 }
 
 /*  Inheritance example  */
@@ -9,6 +11,35 @@ body {
     border-top: 10px solid #1098ad;
 }
 
+.main-header {
+    background-color: #f7f7f7;
+    /* padding: 20px;
+    padding-left: 40px;
+    padding-right: 40px; */
+    padding: 20px 40px;
+    margin-bottom: 60px;
+}
+
+/*  Inheritance example  */
+nav {
+    font-size: 18px;
+}
+
+.post-header {
+    margin-bottom: 40px;
+}
+
+article {
+    margin-bottom: 60px;
+}
+
+aside {
+    background-color: #f7f7f7;
+    border-top: 5px solid #1098ad;
+    border-bottom: 5px solid #1098ad;
+    padding: 50px 0;
+}
+
 h1,
 h2,
 h3 {
@@ -23,30 +54,40 @@ h1 {
 
 h2 {
     font-size: 40px;
-    font-family: sans-serif;
+    margin-bottom: 30px;
 }
 
 h3 {
     font-size: 30px;
-    font-family: sans-serif;
+    margin-bottom: 20px;
+    margin-top: 40px;
 }
 
 h4 {
     font-size: 20px;
-    font-family: sans-serif;
     text-transform: uppercase;
     text-align: center;
 }
 
 p {
     font-size: 22px;
-    font-family: sans-serif;
     line-height: 1.5;
+    margin-bottom: 15px;
+}
+
+ul,
+ol {
+    margin-left: 50px;
+    margin-bottom: 20px;
 }
 
 li {
-    font-family: sans-serif;
     font-size: 20px;
+    margin-bottom: 10px;
+}
+
+li:last-child {
+    margin-bottom: 0;
 }
 
 /* css descendants are actually a bad practice */
@@ -77,18 +118,6 @@ li {
     list-style: none;
 }
 
-.main-header {
-    background-color: #f7f7f7;
-    /* background-color: #444; */
-}
-
-aside {
-    background-color: #f7f7f7;
-    /* background-color: #444; */
-    border-top: 5px solid #1098ad;
-    border-bottom: 5px solid #1098ad;
-}
-
 /* body {
     background-color: azure;
 }
@@ -166,8 +195,3 @@ footer p {
     /* color: blue !important;  <<  NOT A GOOD PRACTICE   */
     color: blue;
 }
-
-/*  Inheritance example  */
-nav {
-    font-size: 18px;
-}