title: Position: fixed; moves element to the right
body: <p>I have a button:</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>.b_next {
    border-radius: 50px;
    height: 45px;
    text-align: center;
    width: 100px;
    font-size: 20px;
    background-color: #cad2e7;
    color: #28284c;
    border-color: transparent;
    bottom: 30px;
  }
  
  .floatbtn {
    position: fixed;
    bottom: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="b_next floatbtn"&gt;Next&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is in a content wrapper has:</p>
  
  <pre class="lang-css prettyprint-override"><code>text-align: center;
  </code></pre>
  
  <p>However, my button is moved to the right when I add <code>position: fixed</code>, how do I fix this?</p>
  
  <p><strong>Expected Output</strong></p>
  
  <p>I want to button to be centered, at the bottom of the page, fixed.</p>