diff --git a/README.md b/README.md
index a85211d..c1f2f0c 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,14 @@
 # CSS Exercises
 
-These exercises are a series of css related tasks intended to complement the HTML and CSS content on The Odin Project.
+These exercises are a series of CSS related tasks intended to complement the HTML and CSS content on The Odin Project.
 
 These exercises should be done when instructed during the course of the curriculum.
 
-> When doing the following exercises, please use all the documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use google, do what you need to do (besides checking the solutions) to get them done.
+> When doing the following exercises, please use all the documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use Google, do what you need to do (besides checking the solutions) to get them done.
 
 ## How to use these exercises
 
-1. Fork and copy this repository. Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how [here](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository).
+1. Fork and copy this repository. To learn how to fork a repository, see [this link](https://docs.github.com/en/get-started/quickstart/fork-a-repo). Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how [here](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository).
 2. Go to an exercise directory and open the HTML file in your browser. You can either open the file directly, or use something like VSCode's Live Server.
 3. For each exercise, view the README, and edit the CSS file to make the output in your browser look like the images provided.
 4. Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation.
diff --git a/animation/01-button-hover/README.md b/animation/01-button-hover/README.md
index e4ee37c..3aa1a1e 100644
--- a/animation/01-button-hover/README.md
+++ b/animation/01-button-hover/README.md
@@ -1,12 +1,12 @@
 # Button Hover
 
-Use a transition to increase the font-size property of the button when you hover your mouse over it.
+Use a transition to scale the button when you hover your mouse over it.
 
 ## Desired Outcome
 
 ![outcome](./desired-outcome.gif)
 
 ### Self Check
-- Does the font-size property change to increase the size?
+- Does the button grow when you hover it?
 - Do other properties of the button remain unchanged?
 - Does the `:hover` pseudo-class trigger the transition?
diff --git a/animation/01-button-hover/desired-outcome.gif b/animation/01-button-hover/desired-outcome.gif
index 23083bb..c087042 100644
Binary files a/animation/01-button-hover/desired-outcome.gif and b/animation/01-button-hover/desired-outcome.gif differ
diff --git a/animation/01-button-hover/solution/solution.css b/animation/01-button-hover/solution/solution.css
index 5fa39a3..5a90ed7 100644
--- a/animation/01-button-hover/solution/solution.css
+++ b/animation/01-button-hover/solution/solution.css
@@ -9,28 +9,21 @@
 }
 
 button {
-  width: 158px;
-  height: 55px;
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: white;
-  color: black;
-  font-size: small;
+  border-radius: 8px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  font-size: 18px;
+  padding: 16px 24px;
   text-align: center;
 }
 
 /* SOLUTION */
 
-/* disclaimer: duplicating the `button` element here isn't best practice.
-In your solution you probably put it right inside the existing `button`,
-which _is_ the best practice. 
-We separated it out here to make it extra clear what has changed. */
-
 button {
-  transition: font-size 1s ease-out 0.25s;
+  transition: transform .3s ease-in-out;
 }
 
 button:hover {
-  font-size: x-large;
-  cursor: pointer;
+  transform: scale(1.2)
 }
diff --git a/animation/01-button-hover/style.css b/animation/01-button-hover/style.css
index ec65525..2f803fc 100644
--- a/animation/01-button-hover/style.css
+++ b/animation/01-button-hover/style.css
@@ -9,12 +9,11 @@
 }
 
 button {
-  width: 158px;
-  height: 55px;
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: white;
-  color: black;
-  font-size: small;
+  border-radius: 8px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  font-size: 18px;
+  padding: 16px 24px;
   text-align: center;
-}
+}
\ No newline at end of file
diff --git a/animation/02-drop-down/README.md b/animation/02-drop-down/README.md
deleted file mode 100644
index cedac0c..0000000
--- a/animation/02-drop-down/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Dropdown
-
-Here you'll make your very own dropdown menu using pure CSS. 
-
-Animate the appearance of a list so that it slides down when you hover your mouse over the button. This exercise will need multiple CSS selectors to get it working properly.
-
-## Desired Outcome
-
-![outcome](./desired-outcome.gif)
-
-### Self Check
-- Does the button's background color change when you hover on it?
-- Does the list smoothly slide down underneath the button when the button is hovered over?
-- Does the list smoothly slide back up to hiding when the mouse is moved away from the button or a list element?
-- Does the list appear and disappear when it is supposed to i.e. only when the mouse is over the button or a list element?
\ No newline at end of file
diff --git a/animation/02-drop-down/desired-outcome.gif b/animation/02-drop-down/desired-outcome.gif
deleted file mode 100644
index 572ad35..0000000
Binary files a/animation/02-drop-down/desired-outcome.gif and /dev/null differ
diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html
deleted file mode 100644
index e50c3cc..0000000
--- a/animation/02-drop-down/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <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" />
-    <title>Dropdown</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div class="dropdown-container">
-      <div class="dropdown-menu">
-        <button>Dropdown</button>
-        <ul>
-          <li>Item 1</a>
-          <li>Item 2</a>
-          <li>Item 3</a>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css
deleted file mode 100644
index 70a5be5..0000000
--- a/animation/02-drop-down/solution/solution.css
+++ /dev/null
@@ -1,65 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.dropdown-container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dropdown-menu {
-  position: relative;
-}
-
-button {
-  background-color: rgb(108, 238, 255);
-  padding: 16px;
-  font-size: 16px;
-  border: none;
-}
-
-ul {
-  position: absolute;
-  left: -25%;
-  background-color: rgb(189, 188, 188);
-  width: 160px;
-  list-style: none;
-  text-align: center;
-}
-
-li {
-  padding: 16px;
-}
-
-/* SOLUTION */
-
-/* disclaimer: duplicating the `ul` element here isn't best practice.
-In your solution you probably put it right inside the existing `ul`,
-which _is_ the best practice. 
-We separated it out here to make it extra clear what has changed. */
-
-ul {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.25s ease-out;
-}
-
-.dropdown-menu:hover ul {
-  max-height: 500px;
-  transition: max-height 0.5s ease-out;
-}
-
-button:hover {
-  cursor: pointer;
-  background-color: rgb(59, 232, 255);
-}
-
-ul li:hover {
-  cursor: pointer;
-  background-color: #ddd;
-}
diff --git a/animation/02-drop-down/solution/solution.html b/animation/02-drop-down/solution/solution.html
deleted file mode 100644
index 84088a1..0000000
--- a/animation/02-drop-down/solution/solution.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <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" />
-    <title>Dropdown</title>
-    <link rel="stylesheet" href="solution.css" />
-  </head>
-  <body>
-    <div class="dropdown-container">
-      <div class="dropdown-menu">
-        <button>Dropdown</button>
-        <ul>
-          <li>Item 1</a>
-          <li>Item 2</a>
-          <li>Item 3</a>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css
deleted file mode 100644
index 4bcb1e8..0000000
--- a/animation/02-drop-down/style.css
+++ /dev/null
@@ -1,37 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.dropdown-container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dropdown-menu {
-  position: relative;
-}
-
-button {
-  background-color: rgb(108, 238, 255);
-  padding: 16px;
-  font-size: 16px;
-  border: none;
-}
-
-ul {
-  position: absolute;
-  left: -25%;
-  background-color: rgb(189, 188, 188);
-  width: 160px;
-  list-style: none;
-  text-align: center;
-}
-
-li {
-  padding: 16px;
-}
diff --git a/animation/02-pop-up/README.md b/animation/02-pop-up/README.md
new file mode 100644
index 0000000..d2ed5b7
--- /dev/null
+++ b/animation/02-pop-up/README.md
@@ -0,0 +1,20 @@
+# Popup
+
+In this exercise we have set up a simple pop-up dialog for you. It already works! Load up index.html and give it a shot!
+
+You don't need to worry about the actual functionality here, we've just written a little javascript that adds and removes a `.show` class to the popup and the backdrop.  Your task then is to make it _move_, as in the desired-outcome image below.
+
+### Hints
+- "modal" is another word for 'pop-up'
+- In the code we've provided, the popup is sitting in it's final position, so you'll need to change it's initial position, and then use a transition to move it back to the center.
+- You might want to change the initial opacity from 0% to something like 20% while you're working on it, so you can easily see where it is coming from before you click the button.
+- Don't overthink this one... it might seem complicated, but it requires just a few lines of code.
+
+## Desired Outcome
+
+![outcome](./desired-outcome.gif)
+
+### Self Check
+
+- The pop-up slides down into position when you click the open button, and slides back up when you click 'close modal'
+- The opacity fades smoothly in and out when toggling the modal. 
\ No newline at end of file
diff --git a/animation/02-pop-up/desired-outcome.gif b/animation/02-pop-up/desired-outcome.gif
new file mode 100644
index 0000000..80e23b3
Binary files /dev/null and b/animation/02-pop-up/desired-outcome.gif differ
diff --git a/animation/03-pop-up/index.html b/animation/02-pop-up/index.html
similarity index 85%
rename from animation/03-pop-up/index.html
rename to animation/02-pop-up/index.html
index f725a27..7fa3bc2 100644
--- a/animation/03-pop-up/index.html
+++ b/animation/02-pop-up/index.html
@@ -8,12 +8,15 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <div class="backdrop"></div>
+    <div class="popup-modal">
+      <h1>Look at me!</h1>
+      <p>I'm a pop up dialog!</p>
+      <button id="close-modal">Close Modal</button>
+    </div>
     <div class="button-container">
       <button id="trigger-modal">Open Modal</button>
     </div>
-    <div class="popup-modal">
-      <button id="close-modal">Close Modal</button>
-    </div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/animation/03-pop-up/script.js b/animation/02-pop-up/script.js
similarity index 70%
rename from animation/03-pop-up/script.js
rename to animation/02-pop-up/script.js
index e7be984..4f7c25c 100644
--- a/animation/03-pop-up/script.js
+++ b/animation/02-pop-up/script.js
@@ -1,11 +1,12 @@
 const openButton = document.getElementById('trigger-modal');
 const closeButton = document.getElementById('close-modal');
+const backdrop = document.getElementById('backdrop')
 
 function toggleModal() {
-  const container = document.querySelector('.button-container');
   const modalDiv = document.querySelector('.popup-modal');
+  const backdrop = document.querySelector('.backdrop')
   modalDiv.classList.toggle('show');
-  container.classList.toggle('show');
+  backdrop.classList.toggle('show');
 }
 
 openButton.addEventListener('click', toggleModal);
diff --git a/animation/02-pop-up/solution/solution.css b/animation/02-pop-up/solution/solution.css
new file mode 100644
index 0000000..5182e96
--- /dev/null
+++ b/animation/02-pop-up/solution/solution.css
@@ -0,0 +1,75 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  overflow: hidden;
+}
+
+.button-container {
+  width: 100vw;
+  height: 100vh;
+  background-color: #ffffff;
+  opacity: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button {
+  padding: 20px;
+  color: #ffffff;
+  background-color: #0e79dd;
+  border: none;
+  border-radius: 5px;
+  font-weight: 600;
+}
+
+.popup-modal {
+  padding: 32px 64px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0%;
+  text-align: center;
+}
+.popup-modal p {
+  margin-bottom: 24px
+}
+
+.backdrop {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  background: #000;
+  opacity: 0%;
+}
+
+.popup-modal.show {
+  opacity: 100%;
+  pointer-events: all;
+}
+
+.backdrop.show {
+  opacity: 30%;
+}
+
+/* SOLUTION */
+
+.popup-modal {
+  transition: transform .3s ease-in-out, opacity .4s ease;
+  transform: translate(-50%, -100%);
+}
+
+.popup-modal.show {
+  transform: translate(-50%, -50%);
+}
+
+
diff --git a/animation/03-pop-up/solution/solution.html b/animation/02-pop-up/solution/solution.html
similarity index 85%
rename from animation/03-pop-up/solution/solution.html
rename to animation/02-pop-up/solution/solution.html
index de53fdc..2c5f766 100644
--- a/animation/03-pop-up/solution/solution.html
+++ b/animation/02-pop-up/solution/solution.html
@@ -8,12 +8,15 @@
     <link rel="stylesheet" href="solution.css" />
   </head>
   <body>
+    <div class="backdrop"></div>
+    <div class="popup-modal">
+      <h1>Look at me!</h1>
+      <p>I'm a pop up dialog!</p>
+      <button id="close-modal">Close Modal</button>
+    </div>
     <div class="button-container">
       <button id="trigger-modal">Open Modal</button>
     </div>
-    <div class="popup-modal">
-      <button id="close-modal">Close Modal</button>
-    </div>
     <script src="solution.js"></script>
   </body>
 </html>
diff --git a/animation/03-pop-up/solution/solution.js b/animation/02-pop-up/solution/solution.js
similarity index 70%
rename from animation/03-pop-up/solution/solution.js
rename to animation/02-pop-up/solution/solution.js
index e7be984..4f7c25c 100644
--- a/animation/03-pop-up/solution/solution.js
+++ b/animation/02-pop-up/solution/solution.js
@@ -1,11 +1,12 @@
 const openButton = document.getElementById('trigger-modal');
 const closeButton = document.getElementById('close-modal');
+const backdrop = document.getElementById('backdrop')
 
 function toggleModal() {
-  const container = document.querySelector('.button-container');
   const modalDiv = document.querySelector('.popup-modal');
+  const backdrop = document.querySelector('.backdrop')
   modalDiv.classList.toggle('show');
-  container.classList.toggle('show');
+  backdrop.classList.toggle('show');
 }
 
 openButton.addEventListener('click', toggleModal);
diff --git a/animation/03-pop-up/style.css b/animation/02-pop-up/style.css
similarity index 59%
rename from animation/03-pop-up/style.css
rename to animation/02-pop-up/style.css
index b998438..058533f 100644
--- a/animation/03-pop-up/style.css
+++ b/animation/02-pop-up/style.css
@@ -12,17 +12,12 @@ body {
   height: 100vh;
   background-color: #ffffff;
   opacity: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-#trigger-modal,
-.popup-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-#trigger-modal {
+button {
   padding: 20px;
   color: #ffffff;
   background-color: #0e79dd;
@@ -32,23 +27,37 @@ body {
 }
 
 .popup-modal {
-  width: 30%;
-  height: 15%;
+  padding: 32px 64px;
   background-color: white;
   border: 1px solid black;
   border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10%;
-  opacity: 0;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0%;
+  text-align: center;
+}
+.popup-modal p {
+  margin-bottom: 24px
 }
 
-#close-modal {
-  padding: 20px;
-  color: #ffffff;
-  background-color: #0e79dd;
-  border: none;
-  border-radius: 5px;
-  font-weight: 600;
+.backdrop {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  background: #000;
+  opacity: 0%;
 }
+
+.popup-modal.show {
+  opacity: 100%;
+  pointer-events: all;
+}
+
+.backdrop.show {
+  opacity: 30%;
+}
+
diff --git a/animation/03-pop-up/README.md b/animation/03-pop-up/README.md
deleted file mode 100644
index 9b01541..0000000
--- a/animation/03-pop-up/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Popup
-
-Popup modals are great for replacing the standard window popups that we often fall back on when we want our users to confirm something, or log in, etc.
-
-In this exercise, activate a popup modal that will appear when the user clicks on the 'Open Modal' button and disappears when they click on the 'Close Modal' button inside the popup. 
-
-The modal should smoothly fade in and slide up to cover the Open button. The background should darken a little to create a clear distinction between foreground and background, and a little shadow should appear on the buttons when you hover over them.
-
-When you're done, keep this repo handy! Being able to build a custom modal is a great show-off for your future projects.
-
-### Hints
-- There's a little Javascript here. Don't worry about it. It's been set up to add/remove the `show` class to the relevant elements when clicked
-- Multiple transitions will be required
-- Pay close attention to the elements being altered with classes being added or removed
-
-## Desired Outcome
-
-![outcome](./desired-outcome.gif)
-
-### Self Check
-
-- The mouse cursor changes to a pointer over the buttons
-- A drop shadow gets added to the buttons when the mouse hovers over them
-- The popup modal appears when the Open button is clicked
-- The background fades to black with 40% opacity when the popup is opened
-- The popup smoothly slides up to cover the existing Open button
-- When the Close button is clicked the popup modal slides back down and gradually disappears
-- When the popup modal is hidden your mouse should not change to the pointer if hovered over an invisible Close button
\ No newline at end of file
diff --git a/animation/03-pop-up/desired-outcome.gif b/animation/03-pop-up/desired-outcome.gif
deleted file mode 100644
index 5ca0675..0000000
Binary files a/animation/03-pop-up/desired-outcome.gif and /dev/null differ
diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css
deleted file mode 100644
index 4f486e4..0000000
--- a/animation/03-pop-up/solution/solution.css
+++ /dev/null
@@ -1,116 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-}
-
-body {
-  overflow: hidden;
-}
-
-.button-container {
-  width: 100vw;
-  height: 100vh;
-  background-color: #ffffff;
-  opacity: 100%;
-}
-
-#trigger-modal,
-.popup-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-#trigger-modal {
-  padding: 20px;
-  color: #ffffff;
-  background-color: #0e79dd;
-  border: none;
-  border-radius: 5px;
-  font-weight: 600;
-}
-
-.popup-modal {
-  width: 30%;
-  height: 15%;
-  background-color: white;
-  border: 1px solid black;
-  border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10%;
-  opacity: 0;
-}
-
-#close-modal {
-  padding: 20px;
-  color: #ffffff;
-  background-color: #0e79dd;
-  border: none;
-  border-radius: 5px;
-  font-weight: 600;
-}
-
-/* SOLUTION */
-
-/* 
-  Disclaimer: duplicating selectors here isn't best practice.
-  We separated it out here to make it extra clear what has changed. 
-*/
-
-.button-container {
-  transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
-}
-
-.button-container.show {
-  background-color: #000000;
-  opacity: 40%;
-}
-
-#trigger-modal:hover,
-#close-modal:hover {
-  cursor: pointer;
-  box-shadow: 1px 1px 2px #000000;
-}
-
-/* 
-  Keep this '.popup-modal' selector separate from the main 
-  .popup-modal selector, for the reasons outlined above 
-  .pop-up-modal.show
-*/
-.popup-modal {
-  visibility: hidden;
-  transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
-    visibility 0.5s linear;
-}
-
-/* 
-  The common properties between .popup-modal and .popup-modal.show 
-  can easily be added by just adding this selector to the main 
-  .popup-modal selector
-*/
-.popup-modal.show {
-  width: 30%;
-  height: 15%;
-  background-color: white;
-  border: 1px solid black;
-  border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 90px;
-}
-
-/* 
-  Keep this selector separate from the main '.popup-modal.show'
-  selector.
-*/
-.popup-modal.show {
-  opacity: 1;
-  visibility: visible;
-  margin-top: 0;
-  transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
-    visibility 0.5s linear;
-}
diff --git a/flex/03-flex-header-2/solution/solution.css b/flex/03-flex-header-2/solution/solution.css
index 54183b7..df6c99a 100644
--- a/flex/03-flex-header-2/solution/solution.css
+++ b/flex/03-flex-header-2/solution/solution.css
@@ -52,7 +52,6 @@ ul {
 .header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   padding: 8px;
 }
 
@@ -67,4 +66,4 @@ ul {
   display: flex;
   align-items: center;
   gap: 16px;
-}
\ No newline at end of file
+}
diff --git a/flex/05-flex-modal/README.md b/flex/05-flex-modal/README.md
index 2e428eb..9f8b55d 100644
--- a/flex/05-flex-modal/README.md
+++ b/flex/05-flex-modal/README.md
@@ -1,7 +1,7 @@
 # A common 'modal' style
 This one is another very common pattern on the web. The solution to this one is _simple_... but it might not be immediately obvious to you. You'll need to edit the HTML a bit to get everything where it needs to be.
 
-### a hint
+### A hint
 Depending on how you approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed.
 
 ## Desired outcome
@@ -15,4 +15,4 @@ Depending on how you approach this one, you might need to revisit the `flex-shri
 - There is padding around the edge of the modal.
 - The header, text, and buttons are aligned with each other.
 - The header is bold and a slightly larger text-size than the text.
-- The close button is vertically aligned with the header, and aligned in the top-right of the card.
\ No newline at end of file
+- The close button is vertically aligned with the header, and aligned in the top-right of the card.
diff --git a/foundations/02-class-id-selectors/README.md b/foundations/02-class-id-selectors/README.md
index 148e4fd..9fd6d40 100644
--- a/foundations/02-class-id-selectors/README.md
+++ b/foundations/02-class-id-selectors/README.md
@@ -5,7 +5,7 @@ There are several elements in the HTML file provided, which you will have to add
 
 It isn't entirely important which class or ID values you use, as the focus here is on being able to add the attributes and use the correct selector syntax to style elements. For the colors in this exercise, try using a non-keyword value (RGB, HEX, or HSL). The properties you need to add to each element are:
 
-* **All odd numbered elements**: a light red/pink background, and a list of fonts containing `Verdana` as the first option and `sans-serif` as a fallback
+* **All odd numbered elements**: a light red/pink background, and a list of fonts containing `Verdana` and `DejaVu Sans` with `sans-serif` as a fallback
 * **The second element**: blue text and a font size of 36px
 * **The third element**: in addition to the styles for all odd numbered elements, add a font size of 24px
 * **The fourth element**: a light green background, a font size of 24px, and bold
diff --git a/foundations/02-class-id-selectors/solution/solution.css b/foundations/02-class-id-selectors/solution/solution.css
index 3cd7120..21c9ad1 100644
--- a/foundations/02-class-id-selectors/solution/solution.css
+++ b/foundations/02-class-id-selectors/solution/solution.css
@@ -1,6 +1,6 @@
 .odd {
   background-color: rgb(255, 167, 167);
-  font-family: Verdana, sans-serif;
+  font-family: Verdana, DejaVu Sans, sans-serif;
 }
 
 .oddly-cool {
@@ -16,4 +16,4 @@
   background-color: hsl(120, 100%, 75%);
   font-size: 24px;
   font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/grid/01-grid-layout-1/solution/solution.css b/grid/01-grid-layout-1/solution/solution.css
index 23d7392..c037f5e 100644
--- a/grid/01-grid-layout-1/solution/solution.css
+++ b/grid/01-grid-layout-1/solution/solution.css
@@ -1,5 +1,13 @@
+body, html {
+  height: 100%;
+  margin: 0;
+}
+
 .container {
   text-align: center;
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
 }
 
 .container div {
@@ -49,25 +57,12 @@
 
 .header {
   grid-column: 1 / 3;
-  grid-row: 1 / 2;
 }
 
 .sidebar {
-  grid-column: 1 / 2;
   grid-row: 2 / 4;
 }
 
-.nav {
-  grid-column: 2 / 3;
-  grid-row: 2 / 3;
-}
-
-.article {
-  grid-column: 2 / 3;
-  grid-row: 3 / 4;
-}
-
 .footer {
   grid-column: 1 / 3;
-  grid-row:  4 / 5;
 }
diff --git a/grid/01-grid-layout-1/style.css b/grid/01-grid-layout-1/style.css
index 1c4478d..ecf1a42 100644
--- a/grid/01-grid-layout-1/style.css
+++ b/grid/01-grid-layout-1/style.css
@@ -1,5 +1,13 @@
+body, html {
+  height: 100%;
+  margin: 0;
+}
+
 .container {
   text-align: center;
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
 }
 
 .container div {