Make page a little responsible

index.html

@@ -23,13 +23,13 @@
                     <li><a href="#">NASA Audiences</a></li>
                     <li>
                         <form class="search-form" method="post" accept-charset="UTF-8">
-                            <input type="search" size="10" placeholder="Search" />
+                            <input type="search" placeholder="Search" />
                             <input type="button" />
                         </form>
                     </li>
                     <li><img src="img/share_icon.png" /></li>
                 </ul>
-
+            
                 <ul class="center-nav">
                     <li><a href="#">International Space Station</a></li>
                     <li><a href="#">Journey to Mars</a></li>

styles.css

@@ -11,13 +11,12 @@ body, html {
 }
 
 body {
+    position: relative;
     background-image: url('img/background.png'); 
     background-repeat: repeat;   
     background-position: center;
     background-size: auto 100%;
-    width: 75%;
     height: auto;
-    margin: auto;
     background-color: #666666;
 }
 
@@ -70,12 +69,17 @@ nav ul li a {
 }*/
 
 .nasa-img {
-    width: 7em;
-    float: left;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 5em;
+    z-index: -1;
 }
 
 .top-nav {
     display: flex;
+    overflow: hidden;
+    flex-wrap: nowrap;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
@@ -111,7 +115,7 @@ nav ul li a {
     border-radius: 0.1em;
     padding: 0 0.5em;
     height: 100%;
-    background-color: #66666688;
+    background-color: #55555580;
 }
 
 .search-form input[type="search"] {
@@ -119,6 +123,7 @@ nav ul li a {
     outline: none;
     background-color: transparent;
     font-size: 1em;
+    size: 10;
 }
 
 .search-form input[type="button"] {
@@ -130,4 +135,51 @@ nav ul li a {
     background-size: contain;
     border: none;
     cursor: pointer;
-}
+}
\ No newline at end of file
+
+.center-nav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: blue;
+}
+
+.center-nav {
+
+}
+
+ /* Extra small devices (phones, 600px and down) */
+ @media only screen and (max-width: 600px) {
+    body {
+        background-color: blue;
+    }
+ }
+
+ /* Small devices (portrait tablets and large phones, 600px and up) */
+ @media only screen and (min-width: 600px) {
+    body {
+        background-color: green;
+    }
+ }
+ 
+ /* Medium devices (landscape tablets, 768px and up) */
+ @media only screen and (min-width: 768px) {
+    body {
+        background-color: yellow;
+    }
+ }
+ 
+ /* Large devices (laptops/desktops, 992px and up) */
+ @media only screen and (min-width: 992px) {
+    body {
+        width: 100%;
+    } 
+ }
+ 
+ /* Extra large devices (large laptops and desktops, 1200px and up) */
+ @media only screen and (min-width: 1200px) {
+    body {
+        width: 1200px;
+        margin: auto;
+    }
+ } 
\ No newline at end of file