Completed Section

margin-and-padding/01-margin-and-padding-1/COMPLETE.md

@@ -0,0 +1 @@
+ # COMPLETE

margin-and-padding/01-margin-and-padding-1/style.css

@@ -7,15 +7,15 @@ body {
   background: pink;
   border: 3px solid blue;
   /* CHANGE ME */
-  padding: 0px;
-  margin: 0px;
+  padding: 32px;
+  margin: 12px;
 }
 
 .two {
   background: lightblue;
   border: 3px solid purple;
   /* CHANGE ME */
-  margin-bottom: 0px;
+  margin-bottom: 48px;
 }
 
 .three {
@@ -23,6 +23,6 @@ body {
   border: 3px solid brown;
   width: 200px;
   /* CHANGE ME */
-  padding: 0px;
-  margin-left: 0px;
+  padding: 32px;
+  margin-left: auto;
 }

margin-and-padding/02-margin-and-padding-2/COMPLETE.md

@@ -0,0 +1 @@
+ # COMPLETE

margin-and-padding/02-margin-and-padding-2/index.html

@@ -11,7 +11,7 @@
     <div class="card">
       <h1 class="title">I'm a card</h1>
       <div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
-      <div class="button-container">and a <button>BIG BUTTON</button></div>
+      <div class="button-container">and a <br><button>BIG BUTTON</button></div>
     </div>
   </body>
 </html>

margin-and-padding/02-margin-and-padding-2/style.css

@@ -6,22 +6,34 @@ body {
 .card {
   width: 400px;
   background: #fff;
-  margin: 16px auto;
+  margin: 8px;
+  padding: 15px;
   }
 
 .title {
   background: #e3f4ff;
+  font-size: 16px;
+  padding: 8px;
 }
 
 .content {
   background: #e3f4ff;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
 .button-container {
   background: #e3f4ff;
+  text-align: center;
+  padding: 8px;
+  margin-top: 8px;
 }
 
 button {
   background: white;
   border: 1px solid #eee;
+  padding: 8px;
+    padding-bottom: 8px;
 }