html - 标题{边距 : trouble ;}

Question

我有麻烦了。带标题: 我不知从哪里得到了 8px 的 margin !我希望我的标题附加到覆盖所有顶部区域而没有边距。但是我只用 margin :-8px; 得到这个东西但是对于不同的屏幕我需要设置其他边距。问题是:如果我不设置右边距: 1)底部出现滚动条； 或者 2) header被背景包围，不依附于周围区域。

CSS:

    header{

        padding: 20px;
        height: 70px;
        margin: -2%;
        z-index: 1;

        box-shadow: -1px 5px 5px #555;
        background-size : cover;
        background: #FFFFFF;
        position: relative;
    }
    H1.name {
        position: absolute;
        margin: 20px 0 0 15px;
        font-size: 34px;
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
        color: #807e7e;    
        display: inline;
    }
    .navigation {
        margin-top: 2.5%;
        vertical-align: middle;
    }
    ul.navigation{
        width: 30%;
        float: right;
        list-style-type: none;
        display: inline-block;
    }
    ul.navigation > li{
        margin: 0 25px 0 0;
        position:relative;
        display: inline;
    }
    a.navitem{
        color:#6a6a6a; 
        font-family: 'Roboto', sans-serif;
        text-decoration: none;

        -webkit-transition: color 1s;
        -moz-transition: color 1s;
        transition: color 1s;
    }

    a.navitem:hover {
        color: #292828;  
    }
    @keyframes nicehover{
        50%{
            color:#6a6a6a; 
        }
    }
    @-webkit-keyframes nicehover{
        50%{
            color:#141313; 
        }

}
@-moz-keyframes nicehover{
    50%{
        color:#6a6a6a; 
    }
}

HTML:

<header >
    <H1 class="name">Slava Korzun</H1>  
        <ul class="navigation">
            <li><a class="navitem" href="index.html">ABOUT-ME</a></li>
            <li><a class="navitem" href="projects.html">PROJECTS</a></li>
            <li><a class="navitem" href="contacts.html">CONTACTS</a></li>
        </ul>
</header>

Answer 1

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

一般最好在每个css中使用这段代码或者在google上搜索一个reset.css文件下载使用