TheOdinProject · 1Ali1077 · Aug 2, 2025 · Aug 2, 2025 · Aug 2, 2025 · Aug 2, 2025
diff --git a/foundations/block-and-inline/01-margin-and-padding-1/style.css b/foundations/block-and-inline/01-margin-and-padding-1/style.css
@@ -7,22 +7,22 @@ body {
   background: pink;
   border: 3px solid blue;
   /* CHANGE ME */
-  padding: 0px;
-  margin: 0px;
+  padding: 32px; /*right*/
+  margin: 12px; /*right*/
 }
 
 .two {
   background: lightblue;
   border: 3px solid purple;
   /* CHANGE ME */
-  margin-bottom: 0px;
+  margin-bottom: 48px; /*right*/
 }
 
 .three {
   background: peachpuff;
   border: 3px solid brown;
   width: 200px;
   /* CHANGE ME */
-  padding: 0px;
-  margin-left: 0px;
+  padding: 32px; /*right*/
+  margin-left: auto; /*wrong*/
 }
diff --git a/foundations/block-and-inline/02-margin-and-padding-2/index.html b/foundations/block-and-inline/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>
diff --git a/foundations/block-and-inline/02-margin-and-padding-2/style.css b/foundations/block-and-inline/02-margin-and-padding-2/style.css
@@ -7,21 +7,36 @@ body {
   width: 400px;
   background: #fff;
   margin: 16px auto;
+  padding: 8px; /*right*/
+
 }
 
 .title {
   background: #e3f4ff;
+  margin-bottom: 8px; /*right*/
+  font-size: 16px; /*right*/
+  padding: 8px; /*right*/
 }
 
 .content {
   background: #e3f4ff;
+  margin-top: 16px;/
+  margin-bottom: 16px; /*wrong*/
+  margin-left: 8px;/
+  margin-right: 8px;/
 }
 
 .button-container {
   background: #e3f4ff;
+  text-align: center; /*right*/
+  padding: 8px; /*right*/
 }
 
 button {
   background: white;
   border: 1px solid #eee;
+  margin-top: 8px;/
+  margin-bottom: 8px; /*half right*/
+  margin-left: 24px;/
+  margin-right: 24px;/
 }
diff --git a/foundations/cascade/01-cascade-fix/README.md b/foundations/cascade/01-cascade-fix/README.md
@@ -1,3 +1,5 @@
+## All done right
+
 # CSS Methods
 
 This next exercise for CSS Foundations is going to give you a closer look at the cascade, in particular specificity and rule order. Both the HTML and CSS files are filled out for you, so instead of adding rules yourself, you will simply be editing what is provided.

diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css
@@ -1,3 +1,5 @@
+/* All done right */
+
 body {
   font-family: Arial, Helvetica, sans-serif;
 }
@@ -8,16 +10,16 @@ body {
   font-weight: 800;
 }
 
-.small-para {
-  font-size: 14px;
-  font-weight: 800;
-}
 
 .para {
   font-size: 22px;
 }
+.small-para {  
+  font-size: 14px;
+  font-weight: 800;
+}
 
-.confirm {
+.button.confirm {
   background: green;
   color: white;
   font-weight: bold;
@@ -29,7 +31,7 @@ body {
   font-size: 20px;
 }
 
-.child {
+.text.child {
   color: rgb(0, 0, 0);
   font-weight: 800;
   font-size: 14px;

diff --git a/foundations/flex/01-flex-center/index.html b/foundations/flex/01-flex-center/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+          <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/foundations/flex/01-flex-center/style.css b/foundations/flex/01-flex-center/style.css
@@ -1,8 +1,13 @@
+/*wronge*/
+
 .container {
   background: dodgerblue;
   border: 4px solid midnightblue;
   width: 400px;
   height: 300px;
+  display: flexbox;
+  align-content: center;
+  justify-items: center;
 }
 
 .box {

diff --git a/foundations/flex/02-flex-header/style.css b/foundations/flex/02-flex-header/style.css
@@ -1,6 +1,15 @@
+/* 7/10 */
+
+*{
+  background-color: bisque;
+}
+
 .header  {
   font-family: monospace;
   background: papayawhip;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .logo {
@@ -9,11 +18,16 @@
   color: tomato;
   background: white;
   padding: 4px 32px;
+
 }
 
 ul {
   /* this removes the dots on the list items*/
   list-style-type: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: 8px;
 }
 
 a {

diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/flex/03-flex-header-2/style.css
@@ -12,6 +12,8 @@ body {
   background: white;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 0 8px rgba(0,0,0,.1);
+  display: flex;
+  justify-content: space-between;
 }
 
 .profile-image {
@@ -20,13 +22,16 @@ body {
   border-radius: 50%;
   width: 48px;
   height: 48px;
+  margin-right: 10px;
+
 }
 
 .logo {
   color: rebeccapurple;
   font-size: 32px;
   font-weight: 900;
   font-style: italic;
+  margin-left: 10px;
 }
 
 button {
@@ -41,8 +46,12 @@ a {
   /* this removes the line under our links */
   text-decoration: none;
   color: rebeccapurple;
+
 }
 
 ul {
   list-style-type: none;
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
 }