title: Bootstrap button goes off the page on mobile
body: <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>