title: Centering button in bootstrap column. Overlaps when screen minimized
body: <p>I have centered my button in one of my bootstap columns. Everything works fine until I get to a smaller screen size and my button overlaps my other column that has text in it. When I play around with the margin things get even weirder. 
  <a href="https://i.stack.imgur.com/FYPDG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FYPDG.png" alt="This is when it&#39;s desktop size"></a>
  <a href="https://i.stack.imgur.com/mqTqC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mqTqC.png" alt="This what my problem looks like"></a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.center-btn-container {
    position: relative;
  }
  
  .paragraph-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 214px;
    height: 40px;
    border-radius: 5px;
    letter-spacing: 2px;
    color: white;
    background-image: linear-gradient(to right, #F36819, #F7931D);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="col-md-6"&gt;
    &lt;span class="col-1-paragraph"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Purus viverra accumsan in nisl nisi scelerisque eu. Duis ut diam quam nulla porttitor. Suspendisse sed nisi lacus sed viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Purus viverra accumsan in nisl nisi scelerisque eu. Duis ut diam quam nulla porttitor. Suspendisse sed nisi lacus sed viverra.&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-6 center-btn-container"&gt;
    &lt;button type="button" class="btn paragraph-btn"&gt;Button&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>