title: Div always centered - even when scrolling page left and right
body: <p>I have a simple HTML page with CSS code.</p>
  
  <p>When I resize the window (from bigger to smaller) and scroll the page left and right, the text "This is working OK" stays on its position. It is fixed and works fine.</p>
  
  <p>But the text "This is not working OK" will not be centered, if I scroll the page left and right. That's the main problem. This div should always, even after scrolling the page left and right, be horizontally centered and on the bottom of the page - not on the bottom of the screen.</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-html lang-html prettyprint-override"><code>&lt;div style="width: 1050px;
              top: 0;
              left: 50%;
              margin-left: -525px;
              position: fixed;
              z-index: 10;"&gt;
    This is working OK
  &lt;/div&gt;
  
  &lt;div style="white-space: nowrap;
              margin-left: auto;
              margin-right: auto;
              margin-top: 150px;
              overflow: visible;"&gt;
    Here is text which is so long that a horizontal scrollbar will be needed for the browser window
  &lt;/div&gt;
  
  &lt;div style="clear: both;
              position: relative;
              overflow: hidden;
              width: 1050px;
              margin-left: auto;
              margin-right: auto;"&gt;
    &lt;div style="position: relative; clear: both;"&gt;
      &lt;div style="clear: both;
                  width: auto;
                  margin-left: 30px;
                  margin-right: 30px;"&gt;
        This is not working OK
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, how could I fix the code? </p>