title: Mysterious margins on webpage
body: <p>I am developing a Wordpress theme and noticed that the whole body of the page is pushed down a bit. I used the inspector in Chrome to find the problem and I found the following styles:</p>
  
  <pre class="lang-css prettyprint-override"><code>&lt;style type="text/css" media="screen"&gt;
      html { margin-top: 32px !important; }
      * html body { margin-top: 32px !important; }
      @media screen and ( max-width: 782px ) {
          html { margin-top: 46px !important; }
          * html body { margin-top: 46px !important; }
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>If I delete this in the inspector the body of the page snaps back to the top. But here is the weird thing. I tried deleting my whole stylesheet to see if the problem was in the css, but the problem is still there. So my guess id that Chrome must be adding these lines, but why? It works fine in IE and Edge.</p>
  
  <p><em>Edit: I tried clearing css cache in Crome, but no difference..</em>
  <em>Edit: I tried adding css reset to the stylesheet but still no difference...</em> </p>
  
  <p>CSS (quite messy, but work in progress): <a href="https://codeshare.io/sr0sg" rel="nofollow noreferrer">https://codeshare.io/sr0sg</a></p>
  
  <p><a href="https://i.stack.imgur.com/IXjvJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IXjvJ.png" alt="enter image description here"></a></p>