title: Centering <a> button within a div
body: <p>I can't seem to center my button in the middle of screen.</p>
  
  <p>Here is the jsFiddle: <a href="http://jsfiddle.net/c7xuo1bv/" rel="nofollow">http://jsfiddle.net/c7xuo1bv/</a></p>
  
  <p>I'm not sure why the button is skewed to the left. I set margin left and right to auto. I think it might be a positioning issue but I tried position relative and absolute but to no avail.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
    &lt;div class="background_image"&gt;
    &lt;/div&gt;
    &lt;div class="welcome-text-container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="welcome-text1"&gt;Welcome to Boothie!&lt;/div&gt;
        &lt;div class="welcome-text2"&gt;BE GOOFY, TAKE A PICTURE!&lt;/div&gt;
        &lt;div class="btn-row"&gt;
        &lt;a href="#services" class="welcome-btn btn-lg"&gt;TELL ME MORE&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.welcome-text-container {
      /* z index --&gt; stack order, higher == top of stack*/
      z-index: 100;
      /* relative position moes an element RELATIVE to its original position
          ie: behind the image!
      */
      position: relative;
      padding-top: 300px;
      padding-bottom: 200px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
  }
  
  .welcome-text1 {
      text-align: center;
      color: #FFF;
      font-size: 40px;
  }
  
  .welcome-text2 {
      text-align: center;;
      font-size: 75px;
      font-weight: 800;
      color: #FFF;
      padding-bottom: 25px;
  }
  
  .welcome-btn {
      text-align: center;
      background-color: #ecf9f8;
      font-weight: 400;
      font-size: 20px;
      padding-left: 40px;
      padding-right: 40px;
      position: relative;
  }
  
  .btn-row {
      margin-left: auto;
      margin-right: auto;
      position: relative;
  }
  
  .row {
      padding-left: 50px;
      padding-right: 50px;
  }
  </code></pre>