diff --git a/Answers.md b/Answers.md
index e69de29..d71a67d 100644
--- a/Answers.md
+++ b/Answers.md
@@ -0,0 +1,19 @@
+1. If you saw this HTML: <div class="box box1 box2 box3"></div> which class has the most specificity weight?
+- box3
+
+2. Describe the difference between display: block; and display: inline;.
+- Block elements behaves as individual blocks. It can have margins and paddings.
+Inline elements behaves along with, and like text.
+
+
+3. While using flexbox, what axis are you using when you use the property: align-items: center?
+- cross
+
+4. What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?
+- fixed: has designer pre-specified layout
+fluid: along with the change of screen size, promotions of elements changes
+adaptive: there are pre-specified points of screen size where layout changes
+responsive: there are pre-specified points of screen size where layout changes. between the points, elements size changes according to the screen size.
+
+5. Why do we need to use the CSS property max-width on the outter most container in a responsive website?
+- While give elements freedom to be changed in proportions, also set a limit on layout change.
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index ae29d6c..f66a1fc 100644
--- a/css/index.css
+++ b/css/index.css
@@ -54,10 +54,11 @@ table {
 html, body {
     height: 100%;
     font-family: 'Roboto', sans-serif;
+    font-size: 62.5%;
 }
 
 h1, h2, h3, h4, h5 {
-    font-size: 18px;
+    font-size: 1.8rem;
     margin-bottom: 15px;
     font-family: 'Rubik', sans-serif;
 }
@@ -67,22 +68,57 @@ p {
 }
 
 .container {
-    width: 800px;
+    max-width: 800px;
     margin: 0 auto;
 }
 
+/* Header Bar Contents */
+
+header {
+    width: 100%;
+    height: 40px;
+    display: inline-flex;
+    font-size: 1.4rem;
+    margin: 20px 0;
+}
+
+header nav {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-end;
+}
+
+header nav a {
+    text-decoration: none;
+    color: #000000;
+}
+
+
+
+
+
+
+/* Main Contents */
+
 .top-content {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: flex-start;
     margin-bottom: 20px;
     border-bottom: 1px dashed black;
 }
 
+.top-content .top-image {
+    margin: 20px 0;
+}
+
 .top-content .text-container {
-    width: 48%;
-    padding: 0 1%;
-    padding-bottom: 20px;  
+    width: 45.5%;
+    margin: 0 2.1%;
+    padding-bottom: 20px; 
+    font-size: 1.6rem;
+    justify-content: space-around;
 }
 
 .middle-content {
@@ -98,7 +134,8 @@ p {
 .middle-content .boxes {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: space-around;
+    margin: 0 1%;
 }
 
 .middle-content .boxes .box {
@@ -106,12 +143,33 @@ p {
     height: 100px;
     background: black;
     margin: 20px 2.5%;
+    font-size: 1.6rem;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
+.middle-content .boxes .box2 {
+    background-color: forestgreen;
+}
+
+.middle-content .boxes .box4 {
+    background-color: darkorchid;
+}
+
+.middle-content .boxes .box6 {
+    background-color: hotpink;
+}
+
+.middle-content .boxes .box8 {
+    background-color: indigo;
+}
+
+.middle-content .boxes .box10 {
+    background-color: lawngreen;
+}
+
 .bottom-content {
     display: flex;
     margin: 0 2% 20px;
@@ -120,6 +178,7 @@ p {
 
 .bottom-content .text-container {
     padding-right: 4%;
+    font-size: 1.6rem;
 }
 
 .bottom-content .text-container:last-child {
@@ -137,10 +196,163 @@ footer nav {
     justify-content: space-between;
     align-items: center;
     padding: 20px 2%;
-    font-size: 14px;
+    font-size: 1.4rem;
 }
 
 footer nav a {
     color: white;
     text-decoration: none;
-}
\ No newline at end of file
+}
+
+
+
+
+/* Screen Size 768 */
+@media (max-width: 768px) {
+    header {
+        flex-direction: column;
+        align-items: center;
+        height: 80px;
+    }
+
+    header .logo {
+        width: 20%;
+        height: 40px;
+    }
+
+    header nav {
+        margin-top: 32px;
+        width: 85%;
+        justify-content: space-between;
+    }
+
+    .middle-content .boxes .box1 {
+        background-color: teal;
+    }
+
+    .middle-content .boxes .box3 {
+        background-color: gold;
+    }
+
+    .middle-content .boxes .box5 {
+        background-color: cadetblue;
+    }
+
+    .middle-content .boxes .box7 {
+        background-color: coral;
+    }
+
+    .middle-content .boxes .box9 {
+        background-color: crimson;
+    }
+}
+
+/* Screen Size 400 */
+@media (max-width: 400px) {
+
+    header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 80px;
+    }
+
+    header .logo {
+        width: 39.5%;
+        height: 60px;
+        margin: 10px 0 0 0;
+    }
+
+    header nav {
+        flex-direction: column;
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    header nav a {
+        width: 100%;
+        height: 45px;
+    	padding: 2rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-top: 1px solid gray;
+
+    }
+
+
+    .top-content {
+        justify-content: center;
+        flex-direction: column;
+        margin-top: 206px;
+    }
+
+    .top-content .top-image {
+        width: 100%;
+    }
+
+    .top-content .text-container {
+        width: 87%;
+        margin-left: 6%
+    }
+
+    .middle-content .boxes {
+        flex-wrap: wrap;
+    }
+
+    .middle-content .boxes .box {
+        width: 25.5%;
+    }
+
+    .middle-content .boxes .box2 {
+        order: -1;
+    }
+
+    .middle-content .boxes .box3 {
+        order: -2;
+    }
+
+    .middle-content .boxes .box4 {
+        order: ;
+    }
+
+    .middle-content .boxes .box5 {
+        order: ;
+    }
+
+    .middle-content .boxes .box6 {
+        order: ;
+    }
+
+    .middle-content .boxes .box7 {
+        order: ;
+    }
+
+    .middle-content .boxes .box8 {
+        order: ;
+    }
+
+    .middle-content .boxes .box9 {
+        order: ;
+    }
+
+    .middle-content .boxes .box10 {
+        display: none;
+    }
+
+    .bottom-content {
+        flex-direction: column;
+    }
+
+    .bottom-content .text-container {
+        width: 100%
+        margin-bottom:17px;
+        margin-left: 1%;
+        padding: 0;
+        /*line-height: 2rem;*/
+    }
+
+
+}
+
+
diff --git a/index.html b/index.html
index 3b36308..301520b 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1.0">
 
   <title>Sprint Challenge - UI / RWD</title>
 
@@ -13,7 +14,18 @@
 
 <body>
     <div class="container">
+        <header>
+            <img class="logo" src="img/lambda-black.png" alt=""> 
+                <nav>
+                    <a href="#">Home</a>
+                    <a href="#">About</a>
+                    <a href="#">Products</a>
+                    <a href="#">Blog</a>
+                    <a href="#">Contact</a>                
+                </nav>
+            </header>
         <section class="top-content">
+            <img class="top-image" src="img/jumbo.jpg" alt=""> 
             <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 +41,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="box box1">Box 1</div>
+                <div class="box box2">Box 2</div>
+                <div class="box box3">Box 3</div>
+                <div class="box box4">Box 4</div>
+                <div class="box box5">Box 5</div>
+                <div class="box box6">Box 6</div>
+                <div class="box box7">Box 7</div>
+                <div class="box box8">Box 8</div>
+                <div class="box box9">Box 9</div>
+                <div class="box box10">Box 10</div>
             </div>
         
         </section>