From 9491684b98ef77a3d335878e024b7843a936abf0 Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 15:24:20 -0400
Subject: [PATCH 01/13] #display-01 done

---
 my-styles.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/my-styles.css b/my-styles.css
index f7d02e4..c8beed3 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -1,4 +1,6 @@
-/* Your Stylesheet */
-
-/* All your edits should go here */
+#display-01 div {
+    display: inline;
+    border: 2px solid blue;
+    padding: 20px;
+}
 

From 7be019566c55c117f4533f9d09ebbd07a0a2d8b1 Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 15:53:46 -0400
Subject: [PATCH 02/13] display-02 done

---
 my-styles.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/my-styles.css b/my-styles.css
index c8beed3..4f08afb 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -1,6 +1,14 @@
 #display-01 div {
     display: inline;
-    border: 2px solid blue;
+    border: 1px solid blue;
     padding: 20px;
 }
+#display-02 span {
+    display: block;
+    white-space: pre-line;
+    border: 1px solid red;
+}
+
+
+
 

From e696040f176805f37457771a0e04d8735931b578 Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 16:09:22 -0400
Subject: [PATCH 03/13] display-03 done

---
 my-styles.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index 4f08afb..ffdc03c 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -8,6 +8,13 @@
     white-space: pre-line;
     border: 1px solid red;
 }
+#display-03 div {
+    display: inline-block;
+    border: 1px solid green;
+    height: 50px;
+    width: 50px;
+    padding: 80px;
+}
 
 
 

From 2f4e1c0a00696b66070097e45b23d641969aefab Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 18:41:25 -0400
Subject: [PATCH 04/13] display-04 done

---
 my-styles.css | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/my-styles.css b/my-styles.css
index ffdc03c..f76e01f 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -1,21 +1,7 @@
-#display-01 div {
-    display: inline;
-    border: 1px solid blue;
-    padding: 20px;
-}
-#display-02 span {
-    display: block;
-    white-space: pre-line;
-    border: 1px solid red;
-}
-#display-03 div {
-    display: inline-block;
-    border: 1px solid green;
-    height: 50px;
-    width: 50px;
-    padding: 80px;
-}
-
+#display-01 div {display: inline; border: 1px solid blue; padding: 20px;}
+#display-02 span {display: block; white-space: pre-line; border: 1px solid red;}
+#display-03 div {display: inline-block; border: 1px solid green; height: 50px; width: 50px; padding: 80px;}
+#display-04 :first-child {display: none;}
 
 
 

From dcc0ed17d1b31b62a8d539160499badd2d0e08cb Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 18:46:46 -0400
Subject: [PATCH 05/13] display-04 visibility

---
 my-styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/my-styles.css b/my-styles.css
index f76e01f..13a49b8 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -1,7 +1,7 @@
 #display-01 div {display: inline; border: 1px solid blue; padding: 20px;}
 #display-02 span {display: block; white-space: pre-line; border: 1px solid red;}
 #display-03 div {display: inline-block; border: 1px solid green; height: 50px; width: 50px; padding: 80px;}
-#display-04 :first-child {display: none;}
+#display-04 :first-child {visibility: hidden;}
 
 
 

From c2656502ce56871080295782be62f5c23ad6585c Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 19:20:03 -0400
Subject: [PATCH 06/13] display-05 done

---
 my-styles.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index 13a49b8..a76751b 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -2,6 +2,8 @@
 #display-02 span {display: block; white-space: pre-line; border: 1px solid red;}
 #display-03 div {display: inline-block; border: 1px solid green; height: 50px; width: 50px; padding: 80px;}
 #display-04 :first-child {visibility: hidden;}
+#display-05 a {background-color: red; display: inline-block; padding-top: 40px; width: 50%; margin-left: 25%;}
+
 
 
 

From 06dd734443eb477263b17f6af931a016f00a67b5 Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 19:46:23 -0400
Subject: [PATCH 07/13] boxmodel-01 done

---
 my-styles.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/my-styles.css b/my-styles.css
index a76751b..dba5814 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -3,7 +3,5 @@
 #display-03 div {display: inline-block; border: 1px solid green; height: 50px; width: 50px; padding: 80px;}
 #display-04 :first-child {visibility: hidden;}
 #display-05 a {background-color: red; display: inline-block; padding-top: 40px; width: 50%; margin-left: 25%;}
-
-
-
+#boxmodel-01 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow;}
 

From 0f407f7fe2a0238f737b0129e343de6abd0f0bca Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 20:04:17 -0400
Subject: [PATCH 08/13] boxmodel-02 done

---
 my-styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/my-styles.css b/my-styles.css
index dba5814..80fdda7 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -4,4 +4,5 @@
 #display-04 :first-child {visibility: hidden;}
 #display-05 a {background-color: red; display: inline-block; padding-top: 40px; width: 50%; margin-left: 25%;}
 #boxmodel-01 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow;}
+#boxmodel-02 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow; box-sizing: border-box;}
 

From 1848d1d5b2361e605b04ddf50deda0c94b6cbfec Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 20:27:39 -0400
Subject: [PATCH 09/13] #float-01 done

---
 my-styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/my-styles.css b/my-styles.css
index 80fdda7..444ca56 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -5,4 +5,5 @@
 #display-05 a {background-color: red; display: inline-block; padding-top: 40px; width: 50%; margin-left: 25%;}
 #boxmodel-01 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow;}
 #boxmodel-02 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow; box-sizing: border-box;}
+#float-01 img {float: left; margin-top: 30px; padding-right: 10px;}
 

From 4309a2e5b7bc56bdf0668b0aaabae4087522d185 Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 20:51:50 -0400
Subject: [PATCH 10/13] float-02 done

---
 my-styles.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/my-styles.css b/my-styles.css
index 444ca56..518de0d 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -5,5 +5,6 @@
 #display-05 a {background-color: red; display: inline-block; padding-top: 40px; width: 50%; margin-left: 25%;}
 #boxmodel-01 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow;}
 #boxmodel-02 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow; box-sizing: border-box;}
-#float-01 img {float: left; margin-top: 30px; padding-right: 10px;}
-
+#float-01 img {float: left; margin-top: 30px; margin-right: 10px;}
+#float-02 img {float: right; margin-top: 30px; margin-left: 10px;}
+#float-02 p {text-align: justify;}

From cc83a3aa8e023508c084c19fec6f53d1f5f42de6 Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 21:28:34 -0400
Subject: [PATCH 11/13] Put each declaration on its own line

---
 my-styles.css | 67 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 57 insertions(+), 10 deletions(-)

diff --git a/my-styles.css b/my-styles.css
index 518de0d..3780085 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -1,10 +1,57 @@
-#display-01 div {display: inline; border: 1px solid blue; padding: 20px;}
-#display-02 span {display: block; white-space: pre-line; border: 1px solid red;}
-#display-03 div {display: inline-block; border: 1px solid green; height: 50px; width: 50px; padding: 80px;}
-#display-04 :first-child {visibility: hidden;}
-#display-05 a {background-color: red; display: inline-block; padding-top: 40px; width: 50%; margin-left: 25%;}
-#boxmodel-01 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow;}
-#boxmodel-02 div {width: 50%; padding: 10%; margin-left: 15%; border: thick solid yellow; box-sizing: border-box;}
-#float-01 img {float: left; margin-top: 30px; margin-right: 10px;}
-#float-02 img {float: right; margin-top: 30px; margin-left: 10px;}
-#float-02 p {text-align: justify;}
+#display-01 div {
+    display: inline; 
+    border: 1px solid blue; 
+    padding: 20px;
+  }
+  #display-02 span {
+    display: block; 
+    white-space: pre-line; 
+    border: 1px solid red;
+  }
+  #display-03 div {
+    display: inline-block; 
+    border: 1px solid green; 
+    height: 50px; 
+    width: 50px; 
+    padding: 80px;
+  }
+  #display-04 :first-child {
+    visibility: hidden;
+  }
+  #display-05 a {
+    background-color: red; 
+    display: inline-block; 
+    padding-top: 40px; 
+    width: 50%; 
+    margin-left: 25%;
+  }
+  #boxmodel-01 div {
+    width: 50%; 
+    padding: 10%; 
+    margin-left: 15%; 
+    border: thick solid yellow;
+  }
+  #boxmodel-02 div {
+    width: 50%; 
+    padding: 10%; 
+    margin-left: 15%; 
+    border: thick solid yellow; 
+    box-sizing: border-box;
+  }
+  #float-01 img {
+    float: left; 
+    margin-top: 30px; 
+    margin-right: 10px;
+  }
+  #float-02 img {
+    float: right; 
+    margin-top: 30px; 
+    margin-left: 10px;
+  }
+  #float-02 p {
+    text-align: justify;
+  }
+  
+
+
+

From 32e0cd976f0807be0ac4b9b7f2c19a7e542e908c Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Thu, 19 Sep 2019 21:50:55 -0400
Subject: [PATCH 12/13] float-03 done

---
 my-styles.css | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/my-styles.css b/my-styles.css
index 3780085..e53115f 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -3,55 +3,61 @@
     border: 1px solid blue; 
     padding: 20px;
   }
-  #display-02 span {
+#display-02 span {
     display: block; 
     white-space: pre-line; 
     border: 1px solid red;
   }
-  #display-03 div {
+#display-03 div {
     display: inline-block; 
     border: 1px solid green; 
     height: 50px; 
     width: 50px; 
     padding: 80px;
   }
-  #display-04 :first-child {
+#display-04 :first-child {
     visibility: hidden;
   }
-  #display-05 a {
+#display-05 a {
     background-color: red; 
     display: inline-block; 
     padding-top: 40px; 
     width: 50%; 
     margin-left: 25%;
   }
-  #boxmodel-01 div {
+#boxmodel-01 div {
     width: 50%; 
     padding: 10%; 
     margin-left: 15%; 
     border: thick solid yellow;
   }
-  #boxmodel-02 div {
+#boxmodel-02 div {
     width: 50%; 
     padding: 10%; 
     margin-left: 15%; 
     border: thick solid yellow; 
     box-sizing: border-box;
   }
-  #float-01 img {
+#float-01 img {
     float: left; 
     margin-top: 30px; 
     margin-right: 10px;
   }
-  #float-02 img {
+#float-02 img {
     float: right; 
     margin-top: 30px; 
     margin-left: 10px;
   }
-  #float-02 p {
+#float-02 p {
     text-align: justify;
   }
-  
+#float-03 img {
+    float: left; 
+    margin-top: 10px; 
+    margin-bottom: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
 
 
 

From 89559035a56b856ed13125b5f066b9494af08b70 Mon Sep 17 00:00:00 2001
From: Nathan Weiler <51128402+NateWeiler@users.noreply.github.com>
Date: Tue, 24 Sep 2019 12:18:13 -0400
Subject: [PATCH 13/13] Update my-styles.css

---
 my-styles.css | 312 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 262 insertions(+), 50 deletions(-)

diff --git a/my-styles.css b/my-styles.css
index e53115f..cf64d64 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -1,63 +1,275 @@
 #display-01 div {
-    display: inline; 
-    border: 1px solid blue; 
-    padding: 20px;
-  }
+  display: inline;
+  border: 1px solid blue;
+  margin: 20px;
+}
+
 #display-02 span {
-    display: block; 
-    white-space: pre-line; 
-    border: 1px solid red;
-  }
+  display: block;
+  border: 1px solid red;
+}
+
 #display-03 div {
-    display: inline-block; 
-    border: 1px solid green; 
-    height: 50px; 
-    width: 50px; 
-    padding: 80px;
-  }
-#display-04 :first-child {
-    visibility: hidden;
-  }
+  display: inline-block;
+  border: 1px solid green;
+  width: 80px;
+  height: 80px;
+}
+
+#display-04 div:first-of-type {
+  display: none;
+}
+
 #display-05 a {
-    background-color: red; 
-    display: inline-block; 
-    padding-top: 40px; 
-    width: 50%; 
-    margin-left: 25%;
-  }
+  display: block;
+  width: 50%;
+  padding: 1rem;
+  background-color: #ccc;
+  margin: 0 auto;
+}
+
+
+/***** Box Model *****/
 #boxmodel-01 div {
-    width: 50%; 
-    padding: 10%; 
-    margin-left: 15%; 
-    border: thick solid yellow;
-  }
+  width: 50%;
+  padding: 50px;
+  margin: 0 auto;
+  border: 25px solid #222;
+}
+
 #boxmodel-02 div {
-    width: 50%; 
-    padding: 10%; 
-    margin-left: 15%; 
-    border: thick solid yellow; 
-    box-sizing: border-box;
-  }
+  width: 50%;
+  padding: 50px;
+  margin: 0 auto;
+  border: 25px solid #222;
+  box-sizing: border-box;
+}
+
+
+/***** Float *****/
 #float-01 img {
-    float: left; 
-    margin-top: 30px; 
-    margin-right: 10px;
-  }
+  float: left;
+  margin: 1em 1em 1em 0;
+}
+
 #float-02 img {
-    float: right; 
-    margin-top: 30px; 
-    margin-left: 10px;
-  }
+  float: right;
+  margin: 1em 0 1em 1em;
+}
 #float-02 p {
-    text-align: justify;
-  }
+  text-align: justify;
+}
+
 #float-03 img {
-    float: left; 
-    margin-top: 10px; 
-    margin-bottom: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-  }
+  float: left;
+  margin: 1em 1em 1em 0;
+}
+#float-03 p:last-child {
+  clear: both;
+}
+
+#float-04 img {
+  float: left;
+  margin: 1em;
+}
+#float-04 div {
+  background-color: lightblue;
+}
+#float-04 div:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+#float-05 p {
+  float: left;
+  box-sizing: border-box;
+  width: 50%;
+  padding: 2rem;
+}
+#float-05 p:last-child {
+  border-left: 1px solid #222;
+}
+
+#float-06 div p {
+  float: left;
+  box-sizing: border-box;
+  width: 50%;
+  padding: 2rem;
+}
+#float-06 div p:first-child {
+  border-right: 1px solid #222;
+}
+#float-06 div:after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+
+/***** Position *****/
+#position-01 div {
+  background-color: red;
+  width: 3rem;
+  height: 3rem;
+}
+#position-01 div:nth-child(even) {
+  position: relative;
+  left: 3rem;
+}
+
+#position-02 div {
+  border: 1px solid #222;
+}
+#position-02 span {
+  position: absolute;
+}
+#position-02 span:nth-of-type(1) {
+  left: 0;
+  top: 0;
+}
+#position-02 span:nth-of-type(2) {
+  right: 0;
+  top: 0;
+}
+#position-02 span:nth-of-type(3) {
+  right: 0;
+  bottom: 0;
+}
+#position-02 span:nth-of-type(4) {
+  left: 0;
+  bottom: 0;
+}
+
+#position-03 div {
+  border: 1px solid #222;
+  height: 100px;
+  position: relative;
+}
+#position-03 span {
+  position: absolute;
+}
+#position-03 span:nth-of-type(1) {
+  left: 0;
+  top: 0;
+}
+#position-03 span:nth-of-type(2) {
+  right: 0;
+  top: 0;
+}
+#position-03 span:nth-of-type(3) {
+  right: 0;
+  bottom: 0;
+}
+#position-03 span:nth-of-type(4) {
+  left: 0;
+  bottom: 0;
+}
+
+#position-04 {
+  position: static;
+}
+#position-04 div {
+  position: absolute;
+  top: 0;
+}
+
+#position-05 {
+  position: relative;
+}
+#position-05 .outer-box {
+  width: 4rem;
+  height: 4rem;
+  background-color: #ccc;
+  position: absolute;
+  top: 0;
+}
+#position-05 .outer-box:first-child {
+  left: 0;
+}
+#position-05 .outer-box:last-child {
+  right: 0;
+}
+#position-05 .inner-box {
+  width: 1rem;
+  height: 1rem;
+  background-color: #222;
+  position: relative;
+  left: 1.5rem;
+  top: 1.5rem;
+}
+
+#position-06 div {
+  background-color: lavender;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+#position-07 a {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  background-color: #222;
+  padding: 0.5rem 1rem;
+  color: #fff;
+  margin-right: 2rem;
+}
+#position-07 a:hover {
+  background-color: lavender;
+  color: #222;
+}
+
+/***** Layout *****/
+#layout {
+  background-color: #44accf; 
+}
+
+#layout #wrapper {
+  width: 85%;
+  margin: 0 auto;
+  background-color: #fff;
+}
+
+#layout nav {
+  background-color: #b7d84b;
+}
+#layout nav:after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+#layout nav a {
+  display: block;
+  float: left;
+  color: #fff;
+  text-decoration: none;
+  border-right: 1px solid #91ab3b;
+  padding: 1rem 2rem;
+}
+
+#layout nav a:hover {
+  background-color: #91ab3b;
+}
 
+#layout aside {
+  float: right;
+  box-sizing: border-box;
+  width: 30%;
+  margin-left: 2rem;
+  padding: 1rem;
+  background-color: #fa8366;
+  border-top: 5px solid #f95b34;
+}
 
+#layout main {
+  margin: 2rem;
+}
 
+#layout footer {
+  background-color: #f36283;
+  padding: 1rem 2rem;
+}