diff --git a/src/tabs/_tabs.scss b/src/tabs/_tabs.scss
index 78d8c42d..84e2ce4f 100644
--- a/src/tabs/_tabs.scss
+++ b/src/tabs/_tabs.scss
@@ -9,10 +9,17 @@
 }
 
 .wsk-tabs__tab-bar {
-  height: 48px;
-  padding: 0 0 0 56px;
-  margin: 0;
-  border-bottom: 1px solid $tab-border-color;
+    display         : flex;
+    flex-direction  : row;
+    flex-wrap       : wrap;
+    justify-content : center; // ⇾
+    align-content   : space-between; // ||
+    align-items     : flex-start; // ↓
+
+    height          : 48px;
+    padding         : 0 0 0 0;
+    margin          : 0;
+    border-bottom   : 1px solid $tab-border-color;
 }
 
 .wsk-tabs__tab {
diff --git a/src/tabs/demo.html b/src/tabs/demo.html
index b6c962e0..a6f2925f 100644
--- a/src/tabs/demo.html
+++ b/src/tabs/demo.html
@@ -17,9 +17,9 @@
 
     <div class="wsk-tabs wsk-js-tabs wsk-js-ripple-effect">
       <div class="wsk-tabs__tab-bar">
-        <a href="#starks-panel" class="wsk-tabs__tab is-active">Starks</a>
-        <a href="#lannisters-panel" class="wsk-tabs__tab">Lannisters</a>
-        <a href="#targaryens-panel" class="wsk-tabs__tab">Targaryens</a>
+          <a href="#starks-panel" class="wsk-tabs__tab is-active">Tab I</a>
+          <a href="#lannisters-panel" class="wsk-tabs__tab">Tab II</a>
+          <a href="#targaryens-panel" class="wsk-tabs__tab">Tab III</a>
       </div>
 
       <div class="wsk-tabs__panel is-active" id="starks-panel">