I'm currently in the process of designing a website and have just started working on the header section. However, I've encountered an issue where there is an unexpected 28px margin at the top. Upon inspecting the code, I found the culprit:
media="screen"
html {
margin-top: 28px !important;
}
HTML
<header>
<div id='header_container'>
<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
<?php wp_nav_menu( array("theme_location"=>"main") ); ?>
</div>
</header>
Here is 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 am unable to locate the source of the mysterious margin. Can you assist me in identifying where it originates from?