Bootstrap button goes off the page on mobile
<p>On desktop, my button looks great. When I go to mobile version, the button goes outside of the screen width like below:</p>

<p><a href="https://i.stack.imgur.com/69Zbs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/69Zbs.png" alt="enter image description here"></a></p>

<p>1) How do I keep this from happened based on my bootply and code below</p>

<p>2) How do I add a top margin to the button too.</p>

<p>Here's my bootply:
<a href="http://www.bootply.com/KChuJgr967" rel="nofollow noreferrer">http://www.bootply.com/KChuJgr967</a></p>

<p>Here's my html:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.content-section-d {
  padding: 50px 0 0 0;
}
.centered-text {
  text-align: center
}
/* Buttons */

.btn,
.btn:link,
.btn:visited {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  padding: 15px 40px;
  background-color: #db4632;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  border-color: #db4632;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
  background-color: #db4632;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content-section-d"&gt;

  &lt;div class="container"&gt;
    &lt;div class="row centered-text"&gt;
      &lt;div class="col-md-4 col-xs-12"&gt;
        &lt;h3&gt;4,000,000+&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 col-xs-12"&gt;
        &lt;h3&gt;1,500,000+&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 col-xs-12"&gt;
        &lt;h3&gt;150,000+&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row centered-text"&gt;
      &lt;div class="col-md-4 col-xs-12"&gt;
        &lt;h3&gt;68,000+&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 col-xs-12"&gt;
        &lt;h3&gt;2,000+&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 col-xs-12"&gt;
        &lt;h3&gt;3 years&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-lg-12 text-center"&gt;
      &lt;a href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"&gt;Register for a Free Account&lt;/a&gt;
    &lt;/div&gt;

  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/div&gt;
&lt;!-- /.content-section-d --&gt;</code></pre>
</div>
</div>
</p>