Question

Please take a look at this: http://jsfiddle.net/MbrJf/

When I use inspect element, the body starts 100px from the top of the page, even though there is no margin or anything like that in the css. If the <nav> element is removed from the page, everything works ok (even if the margin-top rule is removed from the css, it works ok – but there is still a little gap).

The nav shouldn’t be all the way at the top, but when the margin-top is added, it pushes the h1, address, and rest of the site below it… it is very confusing. I’m trying to accomplish this: https://i.stack.imgur.com/Uu8QN.jpg

Can someone make sense out of this?

HTML:

<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>

CSS:

@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;
}


​

​

Answer 1

set the margin-top on the nav and the ul within the nav to 0:

http://jsfiddle.net/MbrJf/3/

The margins will push the body down, and the ul has the default margin which must be canceled (you should use a reset or normalize CSS file)

EDIT

Then you’d want something like this: http://jsfiddle.net/MbrJf/4/? The underlying issue in that case is that the header isn’t properly containing the logo h1 as it is floated. Applying one of the standard solutions like a clearfix or overflow:hidden will take care of that.