diff --git a/layout-practice/index.html b/layout-practice/index.html
index d0f87a7..301661f 100644
--- a/layout-practice/index.html
+++ b/layout-practice/index.html
@@ -96,25 +96,25 @@ <h4>Co Founder</h4>
             <h4 class="headings-2 center-h4">SERIOUSLY</h4>
         	<h2 class="headings-2">So start on this soon.</h2>
             <p align="center">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
-            <img src="images/browser.png" alt="browser image" class="full-width">
+            <img src="images/browser.png" alt="browser image" class="full-width browser">
         </section>
     </article>    
 
    	<article id="blue-bg">
-        <section class="four-column">
-           <h4 class="headings-4 center-h4-2">THIS FORM DOESN'T HAVE TO WORK</h4>
-        	<h2 align="center" class="headings-4">But create it anyways. Use the right fields ...</h2>
-            
+        
+           <h4 class="headings-4">THIS FORM DOESN'T HAVE TO WORK</h4>
+        	<h2 class="headings-4">But create it anyways. Use the right fields ...</h2>
+           <section class="four-column"> 
             <form>
 
   				<div class="input">
-  					<input type="text" name="fullname" value="FULL NAME">
+  					<input type="text" name="fullname" placeholder="FULL NAME">
   				</div>
   				<div class="input">
-  				<input type="text" name="email" value="YOUR EMAIL">
+  				<input type="text" name="email" placeholder="YOUR EMAIL">
   				</div>
 				<div class="input">
-  					<input type="text" name="password" value="PASSWORD">
+  					<input type="text" name="password" placeholder="PASSWORD">
   				</div>
 			</form>
 			<div class="button-box">
diff --git a/layout-practice/layout-practice.css b/layout-practice/layout-practice.css
index 914780a..020f758 100644
--- a/layout-practice/layout-practice.css
+++ b/layout-practice/layout-practice.css
@@ -24,6 +24,7 @@ h1 {
 	font-weight:100;
 	font-size:60px;
 	padding:200px 275px 50px 275px;
+	vertical-align:middle;
 }
 
 h2 {
@@ -64,8 +65,9 @@ a {
 
 .button {
 	background-color:#ff6d6d;
-	display: inline-block;
-	margin-left:43%;
+	display:flex;
+	width:100px;
+	justify-content: center;
 	padding:15px 50px 15px 50px;
 	border-radius: 2px;
 	margin-bottom:20px;
@@ -240,10 +242,10 @@ footer {
 	}
 
 	.button {
-	margin-left:36%;
-	padding:5px 30px 5px 30px;
-	margin-bottom:10px;
-	margin-top:0px;
+	display:flex;
+	width:100px;
+	justify-content: center;
+	padding:5px 15px 5px 15px;
 	}
 
 	.full-width {
@@ -334,9 +336,10 @@ footer {
 		font-size:14px;
 	}
 	.button {
-	margin-left:39%;
-	margin-bottom:10px;
-	margin-top:0px;
+	display:flex;
+	width:100px;
+	justify-content: center;
+	padding:10px 30px 10px 30px;
 	}
 
 	 article h2, article h3, article h4, article p, footer h3 {
@@ -416,9 +419,7 @@ footer {
 		margin-left:6%;
 		margin-top:20px;
 	}
-	.button {
-		padding:5px 50px 5px 50px;
-	}
+
 }
 
 /*desktop styles*/
@@ -452,7 +453,7 @@ footer {
 	}
 
 	#black-bg img {
-		margin-left:80px;
+		margin-left:8%;
 	}
 
 	.three-column div{
@@ -552,28 +553,17 @@ footer {
 	}
 
 	.headings-2 {
-		margin-left:32%;
+		display:flex;
+		justify-content: center;
 	}
 
 	.headings-3 {
 		margin-top:70px;
 	}
 
-	.headings-4 {
-		margin-left:26%;
-		width:700px;
-	}
-
-	#white-bg-1 .center-h4 {
-		margin-left:43%;
-	}
-
-	#grey-bg .center-h4{
-		margin-left:43%;
-	}
-
-	#blue-bg .center-h4-2{
-		margin-left:38%;
+	.headings-4{
+		display:flex;
+		justify-content: center;
 	}
 
 	#brand-names {
@@ -588,8 +578,9 @@ footer {
 	}
 
 	#grey-bg img {
-		margin-left:18%;
-		margin-bottom:-15px;
+		margin-bottom:-10px;
+		display:flex;
+		justify-content: center;
 	}
 
 	#blue-bg form {
@@ -623,4 +614,8 @@ footer {
 	footer {
 		margin-left:5%;
 	}
+
+	#brand-names .shrink-1st {
+		margin-left:15%;
+	}
 }
\ No newline at end of file
diff --git a/web-exercises-master/css-css3/main.css b/web-exercises-master/css-css3/main.css
index b51060c..17b1b0b 100644
--- a/web-exercises-master/css-css3/main.css
+++ b/web-exercises-master/css-css3/main.css
@@ -99,6 +99,9 @@ textarea {
  * 1. Add a background gradient to the body
  */
 body {
+    background: -webkit-gradient(linear, left top, left bottom, from(#80ccff), color-stop(navy), to(purple));
+    background: -webkit-linear-gradient(#80ccff, navy, purple);
+    background: -o-linear-gradient(#80ccff, navy, purple);
     background: linear-gradient(#80ccff, navy, purple);
 }
 
@@ -119,41 +122,91 @@ main > header {
  * 3. Add a serif web font to the page (will require modification to html). Add it first in the font-family below.
  */
 main > header h1 {
-  animation-duration: 1s;
-  animation-fill-mode: both;
-  animation-iteration-count: infinite;
-  animation-duration: 2s;
-  animation-duration: .75s;
-  animation-name:rubberband;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+  -webkit-animation-duration: .75s;
+          animation-duration: .75s;
+  -webkit-animation-name:rubberband;
+          animation-name:rubberband;
+}
+
+@-webkit-keyframes rubberband{
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+            transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+            transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+            transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(.95, 1.05, 1);
+            transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, .95, 1);
+            transform: scale3d(1.05, .95, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
 }
 
 @keyframes rubberband{
   from {
-    transform: scale3d(1, 1, 1);
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
   }
 
   30% {
-    transform: scale3d(1.25, 0.75, 1);
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+            transform: scale3d(1.25, 0.75, 1);
   }
 
   40% {
-    transform: scale3d(0.75, 1.25, 1);
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+            transform: scale3d(0.75, 1.25, 1);
   }
 
   50% {
-    transform: scale3d(1.15, 0.85, 1);
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+            transform: scale3d(1.15, 0.85, 1);
   }
 
   65% {
-    transform: scale3d(.95, 1.05, 1);
+    -webkit-transform: scale3d(.95, 1.05, 1);
+            transform: scale3d(.95, 1.05, 1);
   }
 
   75% {
-    transform: scale3d(1.05, .95, 1);
+    -webkit-transform: scale3d(1.05, .95, 1);
+            transform: scale3d(1.05, .95, 1);
   }
 
   to {
-    transform: scale3d(1, 1, 1);
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
   }
 }
 
@@ -168,7 +221,8 @@ h1 {
 main > aside, main > section {
     float: left;
     background-color: white;
-    box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+            box-sizing:border-box;
     padding:25px;
 }
 
@@ -201,6 +255,8 @@ main > aside nav a {
     border-radius:5px;
     color: white;
     text-decoration: none;
+    -webkit-transition: background-color 2s;
+    -o-transition: background-color 2s;
     transition: background-color 2s;
 }
 
@@ -218,7 +274,9 @@ main > section img {
     width: 300px;
     float:right;
     margin: 0 0 1em 1em;
-    transform:rotate(180deg)
+    -webkit-transform:rotate(180deg);
+        -ms-transform:rotate(180deg);
+            transform:rotate(180deg)
 }
 
 
@@ -310,6 +368,7 @@ main > section img {
 
 @media print,
        (-webkit-min-device-pixel-ratio: 1.25),
+       (-o-min-device-pixel-ratio: 5/4),
        (min-resolution: 1.25dppx),
        (min-resolution: 120dpi) {
     /* Style adjustments for high resolution devices */
@@ -330,7 +389,8 @@ main > section img {
         background: transparent !important;
         color: #000 !important; /* Black prints faster:
                                    http://www.sanbeiji.com/archives/953 */
-        box-shadow: none !important;
+        -webkit-box-shadow: none !important;
+                box-shadow: none !important;
         text-shadow: none !important;
     }
 
@@ -392,4 +452,4 @@ main > section img {
     h3 {
         page-break-after: avoid;
     }
-}
+}
\ No newline at end of file