margin padding box sizing

Author: SwarajKaran

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,21 +1,39 @@
 * {
-  /* border-top: 10px solid #1098ad; */
+  padding: 0;
+  margin: 0;
 }
 
 body {
   color: #444;
   font-family: sans-serif;
+  border-top: 10px solid #1098ad;
+}
+
+nav {
+  font-size: 18px;
+}
+
+article {
+  margin-bottom: 60px;
+}
+.main-header {
+  background-color: #f7f7f7;
+  /* padding: 20px; 
+   padding-left: 40px;
+  padding-right: 40px; */
+  padding: 20px 40px;
+  margin-bottom: 60px;
+}
+.post-header {
+  margin-bottom: 40px;
+}
+aside {
+  background-color: #f7f7f7;
+  border-top: 5px solid #1098ad;
+  border-bottom: 5px solid #1098ad;
+  padding: 50px 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-p,
-/* li { */
-  /* font-family: sans-serif; */
-  /* color: #444; */
-/* } */
 h1,
 h2,
 h3 {
@@ -28,9 +46,12 @@ h1 {
 }
 h2 {
   font-size: 40px;
+  margin-bottom: 30px;
 }
 h3 {
   font-size: 30px;
+  margin-bottom: 20px;
+  margin-top: 40px;
 }
 h4 {
   font-size: 20px;
@@ -40,9 +61,19 @@ h4 {
 p {
   font-size: 22px;
   line-height: 1.5;
+  margin-bottom: 15px;
+}
+ol,
+ul {
+  margin-left: 50px;
+  margin-bottom: 20px;
 }
 li {
   font-size: 20px;
+  margin-bottom: 10px;
+}
+li:last-child {
+  margin-bottom: 0;
 }
 
 /* footer p {
@@ -65,14 +96,7 @@ li {
 .related {
   list-style: none;
 }
-.main-header {
-  background-color: #f7f7f7;
-}
-aside {
-  background-color: #f7f7f7;
-  border-top: 5px solid #1098ad;
-  border-bottom: 5px solid #1098ad;
-}
+
 /* body {
   background-color: orchid;
 } */
@@ -125,6 +149,3 @@ a:active {
 footer p {
   color: orange;
 }
-nav {
-  font-size: 18px;
-}