html boilerplate gap at top of webpage

Question

I'm new to HTML5 boilerplate and trying to build a page.Here's my code.

HTML code:

<div id="wrapper">
        <div id="home">
            <div id="logoBox">
                <div id="logo"></div>
            </div>
            <!-- logoBox ends -->
            <header>
                <nav>
                    <ul>
                        <li>HOME</li>
                        <li>PORTFOLIO</li>
                        <li>TESTIMONIALS</li>
                        <li>ABOUT</li>
                        <li>CONTACT</li>
                    </ul>
                </nav>
            </header>
        </div>
        <!-- home ends -->
    </div>
    <!-- Wrapper ends -->

CSS code:

* {
    margin:0;
    padding:0;
    z-index:0;
    position:relative;
    width:auto;
    height:auto;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
}
html, body {
    top:0;
    left:0;
    margin:0;
    padding:0;
    /*border:1px solid #000000;*/
}
#wrapper {
    top:0;
    left:0;
    position:relative;
    width:100%;
    height:100%;
    /*border:1px solid #FFFFFF;*/
    display : box;
    overflow:hidden; /*auto*/
}

@keyframes btnHvr {
    from {
        background-color:#8bca3c;
    }
    to {
        background-color:#FFFFFF;
    }
}

@-webkit-keyframes btnHvr
/*Safari and Chrome*/
 {
    from {
        background-color:#8bca3c;
    }
    to {
        background-color:#FFFFFF;
    }
}

#home {
    width:100%;    
    height:auto;
    background-color:#8bca3c;
    /*border:1px solid #000000;    <<-- This border removes the gap*/
}

#logoBox {
    /*border:1px solid #000000;*/
    text-align:center;
    width:100%;
    height:auto;
    position:relative;
    margin-top:5em;
    margin-bottom:2em;
}
#logo {
    height:8em;
    width:8em;
    margin:auto;
    text-align:center;
    line-height:8em;
    font-size: 1em;
    background-color:#8bca3c;
    border:2px solid #FFFFFF;
    color:#FFFFFF;
}
#logo:hover {
    color:#8bca3c;
    animation: btnHvr 1s;
    -webkit-animation:btnHvr 1s;
    /*Safari and Chrome*/
    background-color : #FFFFFF;
}
nav {
    margin:auto;
    width: 60%;
    height: auto;
    text-align: center;
}
Header nav ul {
    padding:0;
    margin:0;
}
header nav ul li {
    display: inline-block;
    width:9.5em;
    height:auto;
    padding-top: 0.5em;
    padding-bottom:0.4em;
    background-color : #8bca3c;
    border:1px solid #FFFFFF;
    border-left:1px solid #FFFFFF;
    margin-right:-1px;
    margin-left:0;
    margin-bottom:1em;
    color:#FFFFFF;

    font-family:"Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;

    font-weight: bold;*/
}

header nav li:hover {
    color:#8bca3c;
    animation: btnHvr 1s;
    -webkit-animation:btnHvr 1s;
    /*Safari and Chrome*/
    background-color : #FFFFFF;
}

Why there is a gap at the top the webpage.

If I use the border for #home div, then the gap vanishes. I've tried every answer in stackoverflow and other resources,but the none of the solutions worked in case of my code.

Is there an alternate solution apart from using border.

Answer 1

You have a big margin-top for the div #logoBox.

Just do this way, altering the CSS, it might work:

#logoBox {margin-top: 0; padding-top: 5em;}

---

Preview

Fiddle: http://jsfiddle.net/Dr38e/1/

Answer 2

Reason are Adjoining margins – your margin-top: 5em for #logoBox gets adjoined with the margin-top of the div.