updates fluid heared example

diff --git a/docs/pages/wrapper.md b/docs/pages/wrapper.md
index 1d08b38cc244acfc2655903125758d293dfc0861..78dd61ccc104a9224f708267733e294fbca311aa 100644 (file)
--- a/docs/pages/wrapper.md
+++ b/docs/pages/wrapper.md
@@ -24,40 +24,43 @@ Creating a fluid header with the `<wrapper>` component is pretty straight forwar
 
 ```inky_example
 <style type="text/css">
-  .wrapper.header {
-    background: #8a8a8a !important;
-  }
+.header {
+  background: #8a8a8a;
+}
 
-  .wrapper.header .columns {
-    padding-bottom: 0 !important;
-  }
+.header .columns {
+  padding-bottom: 0;
+}
 
-  .header p {
-    color: #fff !important;
-    font-weight: bold;
-    margin-bottom: 0 !important;
-  }
+.header p {
+  color: #fff;
+  margin-bottom: 0;
+}
 
-  .wrapper.header .header-container {
-    background: #8a8a8a !important;
-  }
+.header .wrapper-inner {
+  padding: 20px; /*controls the height of the header*/
+}
+
+.header .container {
+  background: #8a8a8a;
+}
+
+.wrapper.secondary {
+  background: #f3f3f3;
+}
 </style>
 
-<wrapper class="header">
-  <spacer size="16"></spacer>
-  <center>
-    <container class="header-container">
-      <row class="collapse">
-        <columns small="6" valign="middle">
-          <img src="http://placehold.it/200x50/663399">
-        </columns>
-        <columns small="6" valign="middle">
-          <p class="text-right">BASIC</p>
-        </columns>
-      </row>
-    </container>
-  </center>
-  <spacer size="16"></spacer>
+<wrapper class="header" bgcolor="#8a8a8a">
+  <container>
+    <row class="collapse">
+      <columns small="6" valign="middle">
+        <img src="http://placehold.it/200x50/663399">
+      </columns>
+      <columns small="6" valign="middle">
+        <p class="text-right">BASIC</p>
+      </columns>
+    </row>
+  </container>
 </wrapper>
 ```