diff --git a/.DS_Store b/.DS_Store
index ee7b0e1..560d67a 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/Answers.md b/Answers.md
index e69de29..7a7243e 100644
--- a/Answers.md
+++ b/Answers.md
@@ -0,0 +1,13 @@
+If you saw this HTML: <div class="box box1 box2 box3"></div> which class has the most specificity weight?
+- box one has the most weight since it is the parent.
+Describe the difference between display: block; and display: inline;.
+- A block takes up the width available in a new line whereas an inline element only takes up as much space as it needs. 
+While using flexbox, what axis are you using when you use the property: align-items: center?
+- the cross-axis
+What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?
+- fixed: uses fixed widths and does not change
+- adaptive: used fixed widths and media queries to change the page layout
+- fluid: sizes of elements are in percentages and they change as the page changes, in the same proportion to eachother
+- responsive: layout changes to fit different screens. For example, a webpage on a desktop browser may look different from a tablet or smartphone webpage.
+Why do we need to use the CSS property max-width on the outter most container in a responsive website?
+- We need to use max-width because we want to contain the elments within a page. Not doing so can result in horizontal scroll bars.
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index ae29d6c..437e2e1 100644
--- a/css/index.css
+++ b/css/index.css
@@ -54,11 +54,13 @@ table {
 html, body {
     height: 100%;
     font-family: 'Roboto', sans-serif;
+    font-size: 62.5%;
+    font-weight: 900;
 }
 
 h1, h2, h3, h4, h5 {
-    font-size: 18px;
-    margin-bottom: 15px;
+    font-size: 1.8rems;
+    margin-bottom: 1.5%;
     font-family: 'Rubik', sans-serif;
 }
 
@@ -67,55 +69,927 @@ p {
 }
 
 .container {
-    width: 800px;
+    display: flex;
+    flex-direction: column;
+    max-width:  1000px;
     margin: 0 auto;
+ }
+header {
+    width: 100%;
+    margin: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin: 2% 0 2% 1%;
+}
+header nav ul {
+    width: 100%;
+    display: flex;
+    font-size: 1.518rem;
+    justify-content: space-between;
+    margin: 15% 0 0 1%;
+        
+    }
+header nav ul li{
+    margin: 0% 0 0 50%;
+}
+header nav ul li a {
+    text-decoration: none;
+    color: black;
+}
+header .logo {
+    align-self: flex-start;
+    margin: 1% 0 0 1%;
 }
-
 .top-content {
+    display: inline-block;
+    width: 100%;
+    float: left;
+    margin-bottom: 2%;
+    border-bottom: 1px dashed black; 
+    align-content: center;
+}
+.top-content .jumbo {
+    width: 100%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    margin: 1% %;
+    
+}
+.top-content .text-container {
+    display: inline-block;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+    width: 40%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    font-size: 1.5rem;
+    margin: 0 0 0 9%;
+    
+    
+}
+.top-content .text-container h2{
+    width: 50%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    font-size: 1.9rem;
+    
+    
+}
+
+.middle-content {
+    margin-bottom: 2%;
+    border-bottom: 1px dashed black;
+}
+
+.middle-content h2 {
+    padding: 0 2%;
+    margin-bottom: 0;
+     font-size: 1.9rem;
+}
+
+.middle-content .boxes {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
-    margin-bottom: 20px;
+   
+}
+
+.middle-content .boxes .box {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box1 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box2 {
+    width: 12.5%;
+    height: 10em;
+    background-color: forestgreen;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box3 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box4 {
+    width: 12.5%;
+    height: 10em;
+    background-color: darkorchid;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box5 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box6 {
+    width: 12.5%;
+    height: 10em;
+    background-color: hotpink;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box7 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box8 {
+    width: 12.5%;
+    height: 10em;
+    background-color: indigo;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box9 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box10 {
+    width: 12.5%;
+    height: 10em;
+    background-color: lawngreen;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.bottom-content {
+    display: flex;
+    margin: 0 2% 2%;
+    justify-content: space-around;
+    font-size: 1.5rem;
+    
+}
+.bottom-content h2{
+    font-size: 1.9rem;
+    margin-bottom: 5%;
+    
+}
+
+.bottom-content .text-container {
+    padding-right: 4%;
+}
+
+.bottom-content .text-container:last-child {
+    padding-right: 0;
+}
+
+footer {
+    width: 100%;
+    background: black;
+}
+
+footer nav {
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2% 2%;
+}
+
+footer nav a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.5rem;
+}
+@media(max-width: 1000px){
+    container {
+    display: flex;
+    flex-direction: column;
+    max-width:  1000px;
+    margin: 0 auto;
+ }
+header {
+    width: auto;
+    margin: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin: 2% 0 2% 1%;
+}
+header nav ul {
+    width: 100%;
+    display: flex;
+    font-size: 1.518rem;
+    justify-content: space-between;
+    margin: 15% 0 0 1%;
+        
+    }
+header nav ul li{
+    margin: 0% 0 0 50%;
+}
+header nav ul li a {
+    text-decoration: none;
+    color: black;
+}
+header .logo {
+    align-self: flex-start;
+    margin: 1% 0 0 1%;
+}
+.top-content {
+    display: inline-block;
+    width: 100%;
+    float: left;
+    margin-bottom: 2%;
+    border-bottom: 1px dashed black; 
+    align-content: center;
+}
+.top-content .jumbo {
+    width: 100%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    margin: 1% %;
+    
+}
+.top-content .text-container {
+    display: inline-block;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+    width: 40%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    font-size: 1.5rem;
+    margin: 0 0 0 9%;
+    
+    
+}
+.top-content .text-container h2{
+    width: 50%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    font-size: 1.9rem;
+    
+    
+}
+
+.middle-content {
+    margin-bottom: 2%;
     border-bottom: 1px dashed black;
 }
 
+.middle-content h2 {
+    padding: 0 2%;
+    margin-bottom: 0;
+     font-size: 1.9rem;
+}
+
+.middle-content .boxes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+   
+}
+
+.middle-content .boxes .box {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box1 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box2 {
+    width: 12.5%;
+    height: 10em;
+    background-color: forestgreen;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box3 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box4 {
+    width: 12.5%;
+    height: 10em;
+    background-color: darkorchid;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box5 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box6 {
+    width: 12.5%;
+    height: 10em;
+    background-color: hotpink;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box7 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box8 {
+    width: 12.5%;
+    height: 10em;
+    background-color: indigo;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box9 {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box10 {
+    width: 12.5%;
+    height: 10em;
+    background-color: lawngreen;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.bottom-content {
+    display: flex;
+    margin: 0 2% 2%;
+    justify-content: space-around;
+    font-size: 1.5rem;
+    
+}
+.bottom-content h2{
+    font-size: 1.9rem;
+    margin-bottom: 5%;
+    
+}
+
+.bottom-content .text-container {
+    padding-right: 4%;
+}
+
+.bottom-content .text-container:last-child {
+    padding-right: 0;
+}
+
+footer {
+    width: 100%;
+    background: black;
+}
+
+footer nav {
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2% 2%;
+}
+
+footer nav a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.5rem;
+}
+}
+@media (max-width: 768px) {
+.container {
+    display: flex;
+    flex-direction: column;
+    max-width:  768px;
+    margin: 0 auto;
+ }
+header {
+    width: 100%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 2% 0 2% 1%;
+}
+header nav ul {
+    width: 100%;
+    display: flex;
+    font-size: 1.518rem;
+    justify-content: space-between;
+    margin: 1% 0 0 1%;
+        
+    }
+header nav ul li{
+    margin: auto;
+}
+header nav ul li a {
+    text-decoration: none;
+    color: black;
+}
+header .logo {
+    align-self: center;
+    margin: 1% 0 0%;
+}
+.top-content {
+    display: inline-block;
+    width: 100%;
+    float: left;
+    margin-bottom: 2%;
+    border-bottom: 1px dashed black; 
+    align-content: center;
+}
+.top-content .jumbo {
+    width: 100%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    margin: 1% %;
+    
+}
 .top-content .text-container {
-    width: 48%;
+    display: inline-block;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+    width: 40%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    font-size: 1.5rem;
+    margin: 0 0 0 9%;
+    
+    
+}
+.top-content .text-container h2{
+    width: 50%;
     padding: 0 1%;
-    padding-bottom: 20px;  
+    padding-bottom: 2%;
+    font-size: 1.9rem;
+    
+    
 }
 
 .middle-content {
-    margin-bottom: 20px;
+    margin-bottom: 2%;
     border-bottom: 1px dashed black;
 }
 
 .middle-content h2 {
     padding: 0 2%;
     margin-bottom: 0;
+     font-size: 1.9rem;
 }
 
 .middle-content .boxes {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
+   
 }
 
 .middle-content .boxes .box {
     width: 12.5%;
-    height: 100px;
+    height: 10em;
     background: black;
-    margin: 20px 2.5%;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box1 {
+    width: 12.5%;
+    height: 10em;
+    background-color: teal;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box2 {
+    width: 12.5%;
+    height: 10em;
+    background-color: forestgreen;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box3 {
+    width: 12.5%;
+    height: 10em;
+    background-color: gold;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box4 {
+    width: 12.5%;
+    height: 10em;
+    background-color: darkorchid;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box5 {
+    width: 12.5%;
+    height: 10em;
+    background-color: cadetblue;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box6 {
+    width: 12.5%;
+    height: 10em;
+    background-color: hotpink;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box7 {
+    width: 12.5%;
+    height: 10em;
+    background-color: coral;
+    margin: 2% 2.5%;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
 }
+.middle-content .boxes .box8 {
+    width: 12.5%;
+    height: 10em;
+    background-color: indigo;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box9 {
+    width: 12.5%;
+    height: 10em;
+    background-color: crimson;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box10 {
+    width: 12.5%;
+    height: 10em;
+    background-color: lawngreen;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.bottom-content {
+    display: flex;
+    margin: 0 2% 2%;
+    justify-content: space-around;
+    font-size: 1.5rem;
+    
+}
+.bottom-content h2{
+    font-size: 1.9rem;
+    margin-bottom: 5%;
+    
+}
+
+.bottom-content .text-container {
+    padding-right: 4%;
+}
+
+.bottom-content .text-container:last-child {
+    padding-right: 0;
+}
 
+footer {
+    width: 100%;
+    background: black;
+}
+
+footer nav {
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2% 2%;
+}
+
+footer nav a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.5rem;
+}
+    
+    
+    
+}
+@media (max-width: 400px) {
+.container {
+    display: flex;
+    flex-direction: column;
+    max-width:  400px;
+    margin: 0 auto;
+ }
+header {
+    width: 100%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 2% 0 2% 1%;
+}
+header nav ul {
+    width: 100%;
+    display: flex;
+    font-size: 1.518rem;
+    justify-content: space-between;
+    margin: 1% 0 0 1%;
+        
+    }
+header nav ul li{
+    margin: auto;
+}
+header nav ul li a {
+    text-decoration: none;
+    color: black;
+}
+header .logo {
+    align-self: center;
+    margin: 1% 0 0%;
+}
+.top-content {
+    display: inline-block;
+    width: 100%;
+    float: left;
+    margin-bottom: 2%;
+    border-bottom: 1px dashed black; 
+    align-content: center;
+}
+.top-content .jumbo {
+    width: 100%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    margin: 1% %;
+    
+}
+.top-content .text-container {
+    display: inline-block;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+    width: 40%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    font-size: 1.5rem;
+    margin: 0 0 0 9%;
+    
+    
+}
+.top-content .text-container h2{
+    width: 50%;
+    padding: 0 1%;
+    padding-bottom: 2%;
+    font-size: 1.9rem;
+    
+    
+}
+
+.middle-content {
+    margin-bottom: 2%;
+    border-bottom: 1px dashed black;
+}
+
+.middle-content h2 {
+    padding: 0 2%;
+    margin-bottom: 0;
+     font-size: 1.9rem;
+}
+
+.middle-content .boxes {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-evenly;
+   
+}
+
+.middle-content .boxes .box {
+    width: 12.5%;
+    height: 10em;
+    background: black;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box1 {
+    width: 12.5%;
+    height: 10em;
+    background-color: teal;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box2 {
+    width: 12.5%;
+    height: 10em;
+    background-color: forestgreen;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box3 {
+    width: 12.5%;
+    height: 10em;
+    background-color: gold;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box4 {
+    width: 12.5%;
+    height: 10em;
+    background-color: darkorchid;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box5 {
+    width: 12.5%;
+    height: 10em;
+    background-color: cadetblue;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box6 {
+    width: 12.5%;
+    height: 10em;
+    background-color: hotpink;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box7 {
+    width: 12.5%;
+    height: 10em;
+    background-color: coral;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box8 {
+    width: 12.5%;
+    height: 10em;
+    background-color: indigo;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box9 {
+    width: 12.5%;
+    height: 10em;
+    background-color: crimson;
+    margin: 2% 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.middle-content .boxes .box10 {
+    width: 0;
+    height: 0em;
+    margin: 0;
+ 
+}
 .bottom-content {
     display: flex;
-    margin: 0 2% 20px;
+    margin: 0 2% 2%;
     justify-content: space-around;
+    font-size: 1.5rem;
+    
+}
+.bottom-content h2{
+    font-size: 1.9rem;
+    margin-bottom: 5%;
+    
 }
 
 .bottom-content .text-container {
@@ -136,11 +1010,15 @@ footer nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px 2%;
-    font-size: 14px;
+    padding: 2% 2%;
 }
 
 footer nav a {
     color: white;
     text-decoration: none;
-}
\ No newline at end of file
+    font-size: 1.5rem;
+}
+    
+    
+    
+}
diff --git a/index.html b/index.html
index 3b36308..e8b34f1 100644
--- a/index.html
+++ b/index.html
@@ -3,17 +3,38 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sprint Challenge - UI / RWD</title>
 
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
   <link rel="stylesheet" href="css/index.css">
-
 </head>
-
 <body>
     <div class="container">
+        <header>
+        <img class="logo" src="img/lambda-black.png" alt="Lambda Logo.">            
+            <nav>
+                <ul>
+                    <li>
+                        <a href="#">Home</a>
+                    </li>
+                    <li>
+                        <a href="#">About</a>
+                    </li>
+                    <li>
+                        <a href="#">Products</a>
+                    </li>
+                    <li>
+                        <a href="#">Blog</a>
+                    </li>
+                    <li>
+                        <a href="#">Contact</a>
+                    </li>
+                </ul>
+            </nav>
+        </header>
         <section class="top-content">
+            <img class="jumbo" src="img/jumbo.jpg" alt="future."> 
             <div class="text-container">
                 <h2>The Future</h2>
                 <p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
@@ -29,16 +50,16 @@ <h2>The Past</h2>
             <h2>Why Did It Have To Be Boxes...</h2>
             
             <div class="boxes">
-                <div class="box">Box 1</div>
-                <div class="box">Box 2</div>
-                <div class="box">Box 3</div>
-                <div class="box">Box 4</div>
-                <div class="box">Box 5</div>
-                <div class="box">Box 6</div>
-                <div class="box">Box 7</div>
-                <div class="box">Box 8</div>
-                <div class="box">Box 9</div>
-                <div class="box">Box 10</div>
+                <div class="box1">Box 1</div>
+                <div class="box2">Box 2</div>
+                <div class="box3">Box 3</div>
+                <div class="box4">Box 4</div>
+                <div class="box5">Box 5</div>
+                <div class="box6">Box 6</div>
+                <div class="box7">Box 7</div>
+                <div class="box8">Box 8</div>
+                <div class="box9">Box 9</div>
+                <div class="box10">Box 10</div>
             </div>
         
         </section>