Weird !important margin - html

Question

I am working on a website now and I have just started with the header. But for some odd reason it gives 28px margin on top. When I inspect, it says it's because of this:
media="screen"
html {
margin-top: 28px !important;
}
HTML
<header>
<div id='header_container'>
<h1><?php bloginfo('name'); ?></h1>
<?php wp_nav_menu( array("theme_location"=>"main") ); ?>
</div>
</header>
This is all my css
* {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 960px;
}
header {
width: 100%;
height: 81px;
background-color: grey;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div#header_container {
width: 960px;
margin: 0 auto;
}
div#header_container>h1 {
margin: 0 auto;
}
div#header_container>h1 {
font-family: arial;
font-size: 14px;
}
div#header_container>h1 a {
background-image: url(images/logo.svg);
width: 272px;
height: 19px;
display: block;
text-indent: -9999px;
float: left;
}
/* menu thing */
ul#menu-main-menu {
list-style-type: none;
}
ul#menu-main-menu>li {
margin: 0;
padding: 0;
}
ul#menu-main-menu>li>a {
display:block;
float: left;
padding: 10px;
margin: 0 5px 0 0;
text-decoration: none;
}
I can't find the margin, can you? I am confused where it comes from.

Answer 1

I found the answer:
If it's acting up on your site, open your user profile (Users > Your Profile) and uncheck the 'Show on Front' option to make it disappear.
But thanks for your help guys!
Cheers

Answer 2

I think you are using wordpress, that's something related to the admin top bar which can be disabled by plugins but the css rule remained enabled.
CSS rules marked !important take precedence over later rules.
To fix this issue you may add in your css file the following code at the top and at the bottom. But you must put !important so it will override the previous rule. Or, you can add inline style in the html tag.
html {
margin-top: 0px !important;
}