make sure the tabs are equal widths

components.html

@@ -227,23 +227,23 @@ base_url: "../"
 <nav class="bar bar-tab">
   <a class="tab-item active" href="#">
     <span class="icon icon-home"></span>
-    <span class="tab-label">Label</span>
+    <span class="tab-label">Home</span>
   </a>
   <a class="tab-item" href="#">
     <span class="icon icon-person"></span>
-    <span class="tab-label">Label</span>
+    <span class="tab-label">Profile</span>
   </a>
   <a class="tab-item" href="#">
     <span class="icon icon-star-filled"></span>
-    <span class="tab-label">Label</span>
+    <span class="tab-label">Favorites</span>
   </a>
   <a class="tab-item" href="#">
     <span class="icon icon-search"></span>
-    <span class="tab-label">Label</span>
+    <span class="tab-label">Search</span>
   </a>
   <a class="tab-item" href="#">
     <span class="icon icon-gear"></span>
-    <span class="tab-label">Label</span>
+    <span class="tab-label">Settings</span>
   </a>
 </nav>
 {% endhighlight %}

dist/ratchet.css

@@ -517,8 +517,10 @@ input[type="button"] {
   display: table;
   bottom: 0;
   height: 50px;
+  width: 100%;
   padding: 0;
   border-top: 1px solid #dddddd;
+  table-layout: fixed;
 }
 .bar-tab .tab-item {
   display: table-cell;

lib/sass/bars.scss

@@ -82,8 +82,10 @@
   display: table;
   bottom: 0;
   height: $bar-tab-height;
+  width: 100%;
   padding: 0;
   border-top: $border-default;
+  table-layout: fixed;
 
   // Navigational tab
   .tab-item {