fixing up buttons

dist/ratchet.css

@@ -315,10 +315,14 @@ strong {
 }
 
 .title {
+  position: absolute;
   display: block;
   width: 100%;
   padding: 0;
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: -10px;
+  margin-right: -10px;
   font-size: 17px;
   font-weight: 500;
   line-height: 44px;

index.html

@@ -935,7 +935,7 @@ document
       <h3 class="component-title">Modals</h3>
 
       <div class="component-example">
-        <a href="#myModalexample" class="button">Open modal</a>
+        <a href="#myModalexample" class="button pull-left">Open modal</a>
         <div id="myModalexample" class="modal">
           <header class="bar-nav">
             <h1 class="title">Modal</h1>
@@ -954,10 +954,10 @@ document
 <a href="#myModalexample" class="button">Open modal</a>
 <div id="myModalexample" class="modal">
   <header class="bar-nav">
-    <h1 class="title">Modal</h1>
-    <a class="button" href="#myModalexample">
+    <a class="button pull-left" href="#myModalexample">
       Close
     </a>
+    <h1 class="title">Modal</h1>
   </header>
   
   <div class="content content-padded">

lib/sass/bars.scss

@@ -46,10 +46,14 @@
 
 // Centered text in the .bar-nav 
 .title {
+  position: absolute;
   display: block;
   width: 100%;
   padding: 0;
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: -$bar-side-spacing;
+  margin-right: -$bar-side-spacing;
   font-size: $font-size-default;
   font-weight: $font-weight;
   line-height: $bar-base-height;

lib/sass/buttons.scss

@@ -107,7 +107,8 @@
 .bar-nav {
   // Generic style for all buttons in .bar-title
   [class*="button"] {
-    float: left; // Places buttons to the left by default
+    position: relative;
+    z-index: 10; // Position the buttons on top of .title
     padding: 0;
     font-size: 16px;
     font-weight: $font-weight-light;