css - Web ページの上部にある html ボイラープレートのギャップ

Question

私は HTML5 ボイラープレートが初めてで、ページを作成しようとしています。私のコードは次のとおりです。

HTML コード:

<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 コード:

* {
    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;
}

Web ページの上部にギャップがあるのはなぜですか。

divの境界線を使用すると#home、ギャップがなくなります。私はstackoverflowやその他のリソースですべての答えを試しましたが、私のコードの場合、解決策はどれもうまくいきませんでした.

borderを使用する以外に別の解決策はありますか。