title: CSS media query won't select header tag, but it will select the header element by its ID
body: <p>Why is this happening?</p>
  
  <p><a href="https://codepen.io/headonshoe/pen/dyorVVg" rel="nofollow noreferrer">https://codepen.io/headonshoe/pen/dyorVVg</a></p>
  
  <p>see the codepen, the <code>header</code> is the first element in the HTML body, and the media query is at the very bottom of the CSS</p>