diff --git a/index.html b/index.html
index b933818e..14b865c2 100644
--- a/index.html
+++ b/index.html
@@ -100,15 +100,17 @@
                   >
                 </h3>
               </div>
-              <img src="/images/amok.png" alt="virtual-pet-amok-console" />
-              <ul class="project-skills">
-                <h4>skills</h4>
-                <li>TDD</li>
-                <li>polymorphism</li>
-                <li>encapsulation</li>
-                <li>interface (implements)</li>
-                <li>abstract class (extends)</li>
-              </ul>
+              <div id="project-container">
+                <img src="/images/amok.png" alt="virtual-pet-amok-console" />
+                <ul class="project-skills">
+                  <h4>skills</h4>
+                  <li>TDD</li>
+                  <li>polymorphism</li>
+                  <li>encapsulation</li>
+                  <li>interface (implements)</li>
+                  <li>abstract class (extends)</li>
+                </ul>
+              </div>
             </article>
             <article class="project-item">
               <div>
@@ -121,6 +123,7 @@
                   >
                 </h3>
               </div>
+              <div id="project-container">
               <img
                 src="/images/shelter.png"
                 alt="virtual-pet-shelter-console"
@@ -133,6 +136,7 @@
                 <li>map<> = hashmap<>()></li>
                 <li>collections<></li>
               </ul>
+            </div>
             </article>
             <article class="project-item">
               <div>
@@ -145,6 +149,7 @@
                   >
                 </h3>
               </div>
+              <div id="project-container">
               <img src="/images/pet.png" alt="virtual-pet-console" />
               <ul class="project-skills">
                 <h4>skills</h4>
@@ -155,6 +160,7 @@
                 <li>methods</li>
                 <li>clean code</li>
               </ul>
+            </div>
             </article>
           </div>
         </section>
diff --git a/style.css b/style.css
index b06804ba..d9ea14bd 100644
--- a/style.css
+++ b/style.css
@@ -199,8 +199,8 @@ footer {
   align-items: center;
   margin: 0 auto;
   border: 1px dotted red;
-  padding: 1.5rem;
-  height: 100px;
+  /* padding: 1.5rem; */
+  /* height: 90px; */
 }
 
 #copyright {
@@ -224,6 +224,8 @@ footer {
 
 @media (min-width: 768px) {
   #wrapper {
+    width: 560px;
+    /* text-align: center; */
   }
   nav {
     display: flex;
@@ -233,7 +235,6 @@ footer {
     margin: auto;
     flex: 4;
     justify-content: flex-start;
-
     /* justify-content: space-between; */
   }
 
@@ -243,17 +244,53 @@ footer {
 
   nav ul {
     display: flex;
-    flex: 2;
+    /* flex: 5; */
   }
 
   #aboutMe {
     display: flex;
   }
 
+  #bio {
+    flex: 2;
+  }
+
+  #contact {
+    flex: 1;
+    text-align: end;
+  }
+
   .contactLinks {
     display: flex;
     flex-direction: column;
   }
+
+  #project-container {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .project-item img {
+    flex: 3;
+  }
+
+  .project-skills {
+    flex: 1;
+    padding-right: 1rem;
+    text-align: end;
+  }
+
+  .project-item a {
+    align-self: start;
+  }
+
+  footer {
+    margin: 0 auto;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 90%;
+  }
+
 }
 
 @media (min-width: 1200px) {