title: text inside button not centered
body: <p>Here I'm creating a button but for some odd reason the text is a little off and isn't centered even though I have used <code>display: block;</code> and <code>text-align: center;</code> inside my css file.</p>
  
  <p>Line 30 is where my button starts here is my html and custom css code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'&gt;
      &lt;title&gt;Proto X Media - Home&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="bg1"&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
            &lt;img class="lgsize" src="logo.gif" alt="Logo"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
  
  
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="pushdown"&gt;
            &lt;div class="col-md-6 col-md-offset-3"&gt;
            &lt;span class="text-center title"&gt;Proto X Media&lt;/span&gt;
            &lt;p class="text-center subtext"&gt;Professional Media Production &amp; Hardware Consultation.&lt;/p&gt;
            &lt;div class="buttonpad"&gt;
            &lt;div class="button"&gt;
              &lt;span&gt;Explore&lt;/span&gt;
            &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my css on line 39 is where the code for my button is</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.title {
    font-family: 'Bree Serif', serif;
    font-weight: 800;
    font-size: 500%;
    color: 373d44#;
    display: block;
    text-align: center;
  }
  .bg1 {
    background-image: url("bg2.jpg");
    background-size: cover;
  }
  .lgsize {
    width: 120px;
    height: 110px;
  }
  .pushdown {
    padding-top: 100px;
    padding-bottom: 250px;
  }
  .menu {
    font-size: 100%
    font-family: 'Bree Serif', serif;
  }
  a {
    color:inherit;
    text-decoration: none;
  }
  a:hover {
    background-color: transparent;
    text-decoration: none;
  }
  .subtext {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    display: block;
  }
  .button {
    width: 82.61px;
    height: 37.65px;
    box-sizing: border-box;
    background-color: white;
    font-weight: 700px;
    box-shadow: 0px .2em 0px 0px #ebebeb;
    display: block;
    text-align: center;
    background-position: center;
    border: none;
    margin: auto;
    font-family: 'Bree Serif', serif;
  }
  .buttonpad {
    padding-top: 10px;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you very much ! Also if you haven't noticed I'm using Bootstrap for my grid.</p>