title: Text in horizontal bar doesn't align properly, despite having the same CSS as one that does
body: <p>I have two horizontal bars that I'm trying to align. They both need to stretch the whole width of the viewport, and there is text within them that needs to be centre aligned. To do this, I'm using the following HTML:</p>
  
  <pre><code>&lt;div class="logo-header-desktop"&gt;Header&lt;/div&gt;
  &lt;ul class="logos"&gt;
    &lt;li&gt;Thing 1&lt;/li&gt;
    &lt;li&gt;Thing 2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="logo-footer-desktop"&gt;
    &lt;span class="call-button"&gt;Footer&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following SCSS:</p>
  
  <pre><code>.logo-header-desktop, .logo-footer-desktop {
      @media screen and (min-width: 1000px) {
          position: relative !important;
          left: -16%;
          width: 100vw;
      }
      @media screen and (max-width: 999px) {
          border: solid 2px #f2f2f2;
      }
      padding: 30px;
      text-align: center;
      font-family: 'Sedgwick Ave', cursive;
      font-size: 2rem;
  }
  
  .logo-header-desktop {
      margin-top: 5rem;
      @media screen and (min-width: 1000px) {
          background: #202020;
      }
      @media screen and (max-width: 999px) {
          border-bottom: 0;
      }
  }
  
  .logo-footer-desktop {
      padding-top: 0;
      @media screen and (max-width: 999px) {
          border-top: 0;
      }
      .call-button {
          display: block;
          font-family: 'Nunito', sans-serif !important;
          background: rgba(20, 20, 20, 1);
          padding: 20px;
          @media screen and (min-width: 1000px) {
              width: 100vw;
          }
          @media screen and (max-width: 999px) {
              box-shadow: 0 8px 6px -6px black;
          }
          transition: color 0.2s, background-color ease-in-out 0.2s;
          transform: perspective(1px) translateZ(0);
          &amp;:hover, &amp;:focus, &amp;:active {
              background: #4b3be7;
              color: white;
          }
      }
  }
  </code></pre>
  
  <p>The header and footer are using virtually the same CSS. However, this results in the footer text being misaligned with the header text in a viewport with width over 1000px. Viewports under 1000px aren't affected.</p>
  
  <p>This behaviour is reproducible in the JSFiddle here: <a href="https://jsfiddle.net/j6j4cck2/" rel="nofollow noreferrer">https://jsfiddle.net/j6j4cck2/</a></p>
  
  <p>Why's this happening, and how can I fix it?</p>