title: Alignment shifts after specific width
body: <p>I am helping with the port of a site to a new server.  All of this is inherited code.  An example page is this one:  <a href="http://fcxcobalt.fmi.com/products/" rel="nofollow noreferrer">http://fcxcobalt.fmi.com/products/</a></p>
  
  <p>This heading:</p>
  
  <pre><code>&lt;h1 class="main-content-heading"&gt;&lt;span class="wrapper"&gt;Products&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>At screen widths less than 1690px the heading aligns as desired:</p>
  
  <p><img src="https://i.stack.imgur.com/OeoR3.jpg" alt="enter image description here"></p>
  
  <p>But at 1690px and higher widths the element left aligns to the body of the document.</p>
  
  <p>The heading's own CSS may not be the issue but it is </p>
  
  <pre><code>.main-content-heading {
    margin: 0 0 1.2em;
    padding: 0.5em 0;
    font-weight: 300;
    color: #fff;
    background: #1c3f94;
    text-transform: uppercase;
  }
  </code></pre>
  
  <p>Unminified CSS can be seen here:  <a href="http://pastebin.com/s5MVMZVj" rel="nofollow noreferrer">http://pastebin.com/s5MVMZVj</a></p>
  
  <p>Can anyone advise me as to how this alignment can be made consistent?</p>