title: Bootstrap button goes outside of screen width on mobile
body: <p>My bootstrap button goes outside of the screen width on mobile. How do I fix it so it renders correctly on mobile?  For some reason the mobile button is off the screen to the right and the background image shrinks it's width so it doesn't cover the full width of the screen.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code> &lt;!-- Header --&gt;
  &lt;div class="intro-header"&gt;
      &lt;div class="container"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-lg-7"&gt;
                  &lt;div class="intro-message"&gt;
                      &lt;h1&gt;Fruit Exchange&lt;/h1&gt;&lt;br&gt;
                      &lt;p class="subtitle"&gt;In botany, a fruit is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.&lt;/p&gt;
                      &lt;p class="intro-divider"&gt;&lt;/p&gt;
                      &lt;a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-primary btn-lg"&gt;Register Now to Buy Fruit from Our Warehouse&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- /.container --&gt;
  
  &lt;/div&gt;
  &lt;!-- /.intro-header --&gt;
  </code></pre>
  
  <p>Here's my CSS:</p>
  
  <pre><code>.intro-header {
      padding-top: 50px;
      padding-bottom: 50px;
      text-align: left;
      color: #f8f8f8;
      background: url(http://cdn.tutorialzine.com/wp-content/uploads/2015/06/bootstrap-examples.jpg) no-repeat center center;
      background-size: cover;
  
  
  
    .intro-message {
      position: relative;
      padding-top: 20%;
      padding-bottom: 20%;
  }
  
    .subtitle {
      font-family: 'Merriweather', serif;
      font-weight: 400;
      font-size: 23px;
      color: #ffffff;
      letter-spacing: 0.2px;
      line-height: 1.5;
  }
  
    .intro-divider {
      width: 400px;
      border-top: 3px solid #ffffff;
      border-bottom: 1px solid rgba(0,0,0,0);
      margin: 41px 0 50px 0;
  }
  
    /* Button */
  
  .btn {
      padding: 14px 24px;
      border: 0 none;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
  }
  
  .btn:focus, .btn:active:focus, .btn.active:focus {
      outline: 0 none;
  }
  
  .btn-primary {
      background: #DB4632;
      color: #ffffff;
  }
  
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open &gt; .dropdown-toggle.btn-primary {
      background: #DB4632;
  }
  
  .btn-primary:active, .btn-primary.active {
      background: #DB4632;
      box-shadow: none;
  }
  </code></pre>