title: Center a text link button
body: <p>I am trying to center a text link, however, it is not responding to text-align: center;</p>
  
  <p>Any thoughts? I know I am overthinking this..</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="promotion-left"&gt;&amp;nbsp;
      &lt;/div&gt;
      &lt;div class="promotion-right"&gt;
        &lt;h2 class="instructions-head"&gt;INSTRUCTIONS&lt;/h2&gt;
        &lt;ol class="instructions-list"&gt;
          &lt;li class="instructions-item"&gt;INSTRUCTIONS 1&lt;/li&gt;
          &lt;li class="instructions-item"&gt;INSTRUCTIONS 2&lt;/li&gt;
          &lt;li class="instructions-item"&gt;INSTRUCTIONS 3&lt;/li&gt;
        &lt;/ol&gt;
        &lt;a href="#" class="promotion-btn"&gt;Download&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.promotion-left {
    background: white;
    display: inline-block;
    width: 15%;
  }
  .promotion-right {
    background: #eaf8fe;
    display: inline-block;
    width: 80%;
  }   
  a.promotion-btn {
    background: red;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    padding: 8px 16px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/0k560g1b/" rel="nofollow" title="JSFIDDLE">JSFIDDLE</a></p>