Added media queries

css/main.css

@@ -102,6 +102,7 @@ body {
 main {
     width:1178px;
     margin:0 auto;
+    padding:10px;
 }
 
 h1 {
@@ -192,11 +193,42 @@ footer ul li {
 }
 
 
+/*Mobile Styles*/   
+@media screen and (max-width:779px){
 
+main {
+    width:90%;
+    padding:10px;
+}
 
+article {
+    width:70%;
+    padding:10px;
+}
 
+footer ul li {
+    float:none;
+}
+
+}
 
+/*Tablet Styles*/   
+@media screen and (min-width:780px) and (max-width:969px) {
 
+main {
+    width:90%;
+}
+
+article {
+    width:40%;
+}
+
+}
+
+/*Desktop Styles*/
+@media screen and (min-width:970px) {
+
+}
 
 
 

index.html

@@ -40,7 +40,7 @@
     <article>
         <header>
             <h1>Article Title 2</h1>
-            <p>We're messing around with some...stuff. And things</p>
+            <p>We're messing around with some...stuff. And things.</p>
         </header>
         <section>
             <h1>But Why?</h1>