text inside button not centered
<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>