title: Center text horizontally in fixed div
body: <p>I'm trying to center four <code>h4</code> tags within their respective <code>fixed</code> divs (all with <code>width: 100%</code> to keep their <code>background-color: rgba(255, 255, 255, 0.5);</code> spanned across the whole browser width).</p>
  
  <p>I've tried many combinations of CSS tags but haven't been able to sort it out. </p>
  
  <p>Working draft: <a href="http://parkerrichard.com/new/art.html" rel="nofollow">http://parkerrichard.com/new/art.html</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- row 1: body --&gt;
  &lt;div class="container thumb-page"&gt;
      &lt;div class="row thumb-col mb"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;
              &lt;div class="fix"&gt;&lt;h4 class="hidden-xs"&gt;PAINTING&lt;/h4&gt;&lt;/div&gt;
              &lt;h4 class="centered hidden-lg hidden-md hidden-sm"&gt;PAINTING&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;
              &lt;div class="fix"&gt;&lt;h4 class="hidden-xs"&gt;DRAWING&lt;/h4&gt;&lt;/div&gt;
              &lt;h4 class="centered hidden-lg hidden-md hidden-sm mt-sm"&gt;DRAWING&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;
              &lt;div class="fix"&gt;&lt;h4 class="hidden-xs"&gt;DIGITAL&lt;/h4&gt;&lt;/div&gt;
              &lt;h4 class="centered hidden-lg hidden-md hidden-sm mt-sm"&gt;DIGITAL&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;
              &lt;div class="fix"&gt;&lt;h4 class="hidden-xs"&gt;VIDEO&lt;/h4&gt;&lt;/div&gt;
              &lt;h4 class="centered hidden-lg hidden-md hidden-sm mt-sm"&gt;VIDEO&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>/* Thumbnail section */
  
  .thumb-col .fix {
      position: fixed;
      background-color: rgba(255, 255, 255, 0.5);
      display: inline-block;
      width: 100%;
  }
  
  .thumb-col h4 {
      letter-spacing: 2px;
  }
  
  .thumb-col .fix h4 {
      margin-top: 0px !important;
      margin-bottom: 15px !important;
  }
  
  .thumb-col div a img {
      margin: 0 auto !important;
      display: block;
      width: 200px;
  }
  </code></pre>