diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css
index 4dba466..fc2e8f0 100644
--- a/src/005-centering/example/example.css
+++ b/src/005-centering/example/example.css
@@ -1,5 +1,119 @@
 /*
  * Practice : Centering
  * Version: 1
- * By: xxx
+ * By: Laura Alvarez
  */
+ .mdl-layout__content {
+ 	margin-top: 20px;
+ }
+
+ .content, .left-square, .left-square-m, .vertically, .gray-square-one, .nav, h4 {
+ 	background: #bdbdbd87;
+ }
+
+ .page-content {
+ 	max-width: 1200px;
+ 	margin: auto;
+ 	background-color: rgb(233,233,233);
+ 	padding-top: 1px;
+ }
+
+ h4, .nav {
+ 	text-align: center;
+ 	padding: 5px;
+ }
+
+ .nav {
+ 	padding: 10px;
+ 	margin-bottom: 20px;
+ }
+
+ .nav a {
+ 	text-decoration: none;
+ 	padding: 10px;
+ }
+
+ .nav div {
+ 	display: inline;
+ }
+
+ .content {
+ 	margin: 10px;
+ 	width: 33%;
+ 	padding: 32px;
+ }
+
+ .content-section {
+ 	display: flex;
+ 	padding: 0 120px;
+ }
+
+ .first-row div{
+ 	margin-top: auto;
+ }
+
+ .second-row {
+ 	margin-bottom: 20px;
+ }
+
+ .left-square{
+ 	width: 50%;
+ 	padding: 30px 0 30px 10px;
+ }
+
+ .left-square-m {
+ 	width: 15%;
+ 	margin: 15px 0;
+ 	padding: 50px 0 50px 10px;
+ }
+
+ .vertically {
+ 	padding: 100px 25px;
+ 	margin: 15px 0;
+ }
+
+ .gray-square-one {
+ 	padding: 150px 20px;
+ 	margin-top: 20px;
+ }
+
+ .gray-square-one div{
+ 	color: white;
+ 	background: darkgrey;
+ }
+
+ .pad1 div{
+ 	padding: 10px 0px 80px 20px;
+ }
+
+ .pad2 div{
+ 	padding: 10px;
+ }
+
+ .green-square {
+ 	background-color: rgb(118, 166, 162);
+ 	padding: 100px;
+ 	margin-top: 20px;
+ 	display: flex;
+ 	justify-content: center;
+ 	align-items: center;
+ }
+
+ .red-square {
+ 	padding: 60px;
+ 	background-color: rgb(196, 86, 91);
+ 	position: relative;
+ }
+
+ .black-square {
+ 	padding: 30px;
+ 	background-color: rgb(66,76,88);
+ }
+
+ .yellow-square {
+ 	padding: 18px;
+ 	background-color: rgb(221, 173, 120);
+ 	position: absolute;
+ 	top: 40%;
+ 	left: 40%;
+ }
diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html
index b6d2e1e..5ec3a65 100644
--- a/src/005-centering/example/index.html
+++ b/src/005-centering/example/index.html
@@ -36,7 +36,7 @@
         <h4>This text is centered.</h4>
 
         <div>
-          <div>
+          <div class="nav">
             <div><a href="">Link 1</a></div>
             <div><a href="">Link 2</a></div>
             <div><a href="">Link 3</a></div>
@@ -44,33 +44,33 @@ <h4>This text is centered.</h4>
           </div>
         </div>
 
-        <div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is
+        <div class="content-section first-row">
+          <div class="content">I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is
             block-like with my siblings and we're centered in a row.
           </div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
+          <div class="content">I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
             than my siblings do.
           </div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
+          <div class="content">I'm an element that is block-like with my siblings and we're centered in a row.</div>
         </div>
 
-        <div>
-          <div> I'm an element that is block-like with my siblings and we're centered in a row.</div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
+        <div class="content-section second-row">
+          <div class="content"> I'm an element that is block-like with my siblings and we're centered in a row.</div>
+          <div class="content">I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
             than my siblings do.
           </div>
-          <div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
+          <div class="content">I'm an element that is block-like with my siblings and we're centered in a row.</div>
         </div>
 
-        <div>
+        <div class="left-square">
           I'm a centered line.
         </div>
 
-        <div>
+        <div class="left-square-m">
           <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
         </div>
 
-        <div>
+        <div class="vertically">
           <p>I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra
             vitae corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci
             pulvinar assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed.
@@ -83,21 +83,21 @@ <h4>This text is centered.</h4>
             elementum aliquam vitae.</p>
         </div>
 
-        <div>
+        <div class="gray-square-one pad1">
           <div>I'm a block-level element with a fixed height, centered vertically within my parent.</div>
         </div>
 
-        <div>
+        <div class="gray-square-one pad2">
           <div>I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level
             element with an unknown height, centered vertically within my parent. I'm a block-level element with an
             unknown height, centered vertically within my parent.
           </div>
         </div>
 
-        <div>
-          <div>
-            <div></div>
-            <div></div>
+        <div class="green-square">
+          <div class="red-square">
+            <div class="black-square"></div>
+            <div class="yellow-square"></div>
           </div>
         </div>