diff --git a/README.md b/README.md
index 201c7e9..9cffc16 100644
--- a/README.md
+++ b/README.md
@@ -21,9 +21,12 @@ open css-resize-rules/base-level-css.html
 
 ## 3) Practical application for resizing in general (text and images)
 ```
-open css-grid-layout-example/uncommented/index.html
-code css-grid-layout-example/uncommented/
-open css-grid-layout-example/uncommented/index.html
+open css-grid-layout-example/1_uncommented/index.html
+code css-grid-layout-example/1_uncommented/
+open css-grid-layout-example/1_uncommented/index.html
+open css-grid-layout-example/2_the_problem/index.html
+open css-grid-layout-example/3_resize_example/index.html
+
 ```
 
 ## 4) Bootstrap and Tachyon aspect ratio's
diff --git a/css-grid-layout-example/3_resize_example/css/style.css b/css-grid-layout-example/3_resize_example/css/style.css
index d3043c2..40280fd 100644
--- a/css-grid-layout-example/3_resize_example/css/style.css
+++ b/css-grid-layout-example/3_resize_example/css/style.css
@@ -1,56 +1,31 @@
-.text-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.banner {
-  font-size: 4vw;
-}
-
-.image-size {
-  height: 32vw;
-  width: 42.66vw;
-  /*
-  height: 50vmin;
-  width: 66vmin;
-  */
-}
-.grid-container {
+body {
   font-family: "Open Sans";
-  font-size: 24px;
-  color: white;
-  height: calc(100vh - 1em);
-  background: white;
-}
-
-.grid-item {
-  background: #229fd9ff;
-  text-align: center;
-  align-content: center;
-  padding: 15px;
 }
-
-.grid-container {
-  display: grid;
-  grid-gap: 15px;
+.text-center {
+  display: flex; align-items: center; justify-content: center;
 }
+.banner { font-size: 4vw; }
 
-.grid-container header { grid-area: header; }
-
-.grid-container main { grid-area: main; }
+.image-size { width: 42.66vw; padding-bottom:12px; }
 
-.grid-container nav { grid-area: navigation; }
+.grid-container { height: calc(100vh - 16px /*because margin is 8px * 2*/); display: grid; grid-gap: 15px;
+}
 
-.grid-container aside { grid-area: sidebar; font-size: 14px; }
+.grid-item { background: #229fd9; text-align: center; }
 
-.grid-container footer { grid-area: footer; }
+/* Map html tags to grid container. */
+header { grid-area: header; }
+main { grid-area: main; }
+nav { grid-area: navigation; }
+aside { grid-area: sidebar; font-size: 14px; }
+footer { grid-area: footer; }
 
 @media all and (display-mode: fullscreen) {
   .grid-container {
-    grid-template-columns: 200px 1fr 200px;
-    grid-template-rows: 12vw 1fr 120px;
-    grid-template-areas: "header header header"
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-areas:
+     "header header header"
      "navigation main sidebar"
      "footer footer footer";
  }
@@ -58,9 +33,10 @@
 
 @media not all and (display-mode: fullscreen) {
   .grid-container {
-    grid-template-columns: 200px 1fr 200px;
-    grid-template-rows: 12vw 1fr 45px;
-    grid-template-areas: "header header header"
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-areas:
+     "header header header"
      "navigation main sidebar"
      "footer footer footer";
  }
@@ -68,9 +44,10 @@
 
 @media screen and (max-width: 1082px) {
   .grid-container {
-    grid-template-columns: 1fr 150px;
-    grid-template-rows: 12vw 50px 1fr 10px;
-    grid-template-areas: "header header"
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    grid-template-areas:
+      "header header"
       "navigation navigation"
       "main sidebar"
       "footer footer";
@@ -80,18 +57,31 @@
 @media screen and (max-width: 678px) {
   .grid-container {
     grid-template-columns: 100%;
-    grid-template-rows: 12vw 50px 3fr 1fr 30px;
-    grid-template-areas: "header"
+    grid-template-rows: 12vw 50px  1fr 1fr 1fr;
+    grid-template-areas:
+      "header"
       "navigation"
       "main"
       "sidebar"
       "footer";
   }
-  .align-left {
+  .text-center {
+    display: flex;
+    justify-content: flex-start;
+    text-align:left;
+    align-items: center;
+    padding-left: 12px; padding-right: 12px;
+  }
+  .leftalign {
     display: flex;
-    align-items: flex-start;
     justify-content: flex-start;
     text-align:left;
+    align-items: center;
+    padding-left: 12px; padding-right: 12px;
+  }
+  .image-size {
+    padding-left: 12px; padding-right: 12px;
+    display: flex; justify-content: flex-start;
   }
 }
 
diff --git a/css-grid-layout-example/3_resize_example/index.html b/css-grid-layout-example/3_resize_example/index.html
index fa3c0a6..798054b 100644
--- a/css-grid-layout-example/3_resize_example/index.html
+++ b/css-grid-layout-example/3_resize_example/index.html
@@ -22,7 +22,7 @@
       <img src="./imgs/tylerPhoto.png" alt="Tyler's Face!" class="image-size align-left" >
   </main>
   <nav class="grid-item text-center">Menu</nav>
-  <aside class="grid-item">
+  <aside class="grid-item leftalign">
       Lorem ipsum dolor amet typewriter single-origin coffee schlitz, adaptogen poke.Lorem ipsum dolor amet typewriter single-origin coffee schlitz, adaptogen poke.Lorem ipsum dolor amet typewriter single-origin coffee schlitz, adaptogen poke. Lorem ipsum dolor amet typewriter single-origin coffee schlitz, adaptogen poke.
   </aside>
   <footer class="grid-item text-center">Footer</footer>
diff --git a/css-resize-rules/base-level-css.html b/css-resize-rules/base-level-css.html
index 9c37b68..56aa4a6 100644
--- a/css-resize-rules/base-level-css.html
+++ b/css-resize-rules/base-level-css.html
@@ -6,15 +6,12 @@
   .largeFont { font-size: 32px; }
 
   html       { font-size: 3vmin; }
+  
+  
   h1         { font-size: 3rem; }
 
 </style>
-<!-- rules
-  px stuff at the top...
-  html -root font size should be vmin off port size.
-  paragraphs font size should be a # px...
-  header     font size should be a # rem  variation off font-size
--->
+
 </head>
 <body>
 
@@ -24,7 +21,7 @@ <h1> header     font size should be a # rem  variation off font-size, </h1>
   <br/>
   <br/>
   <br/>
-  <div style='calc(16px +1vmin)'>font-size 16px + 1vmin 😘</div>
+  <div style="font-size: calc(16px+10vmin)">font-size 16px + 1vmin 😘</div>
 
   html -root font size is overriden by '*' font size of 12