Could you please check out this link: http://jsfiddle.net/MbrJf/
Upon inspecting the element, I noticed that the body of the page is starting 100px from the top, even though there are no margins or any styling in the CSS. The issue seems to arise when the <nav> element is present on the page, causing a gap at the top. Even if the margin-top rule is removed from the CSS, there is still a slight gap visible.
The desired layout should look like this: https://i.sstatic.net/Uu8QN.jpg
Can someone help me understand why this is happening?
Here is the HTML code:
<div id="wrapper">
<header>
<h1><a href="index.html" title="Ozio Sushi">Ozio Sushi</a></h1>
<address>
123.456.7890<br>
123 Fake Street West, Toronto
</address>
<nav>
<ul>
<li><a href="about.html" title="About">About</a> </li>
<li> <a href="menu.html" title="Menu">Menu</a></li>
<li> <a href="gallery.html" title="Gallery">Gallery</a></li>
<li> <a href="contact.html" title="Contact">Contact</a></li>
</ul>
</nav>
</header>
</div>
And here is the CSS code:
@charset "UTF-8";
/* CSS Document */
body {
margin: 0px;
padding: 0px;
background-color: #362f2d;
}
a {
text-decoration: none;
color:inherit;
border: none;
}
#wrapper {
background-color: #362f2d;
width: 100%;
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
}
header {
clear: both;
width: 100%;
display: block;
}
nav {
height: 50px;
width: 100%;
background-color: #f7941d;
margin-top: 100px;
}
header h1 {
font-family: Kaushan script, cursive;
color: white;
float:left;
font-size: 60pt;
font-weight: 300;
margin:0px;
}
address {
font-family: Lato, Arial, sans-serif;
color: white;
font-weight:300;
font-size: 8pt;
float:left;
font-style: normal;
}
li {
display: inline;
margin-right: 60px;
font-family: Lato, Arial, sans-serif;
color: white;
font-size: 16pt;
font-weight: 400;
}
#main {
clear:both;
margin:0px;
}