私のトップバーは完全にはいっぱいではありません

Question

私のウェブサイトのトップバーは完全に色が変わっていません。なぜ誰が知っていますか？私のwebsiteとerrorです。私のコード：

HTML

<header> 
    <ul> 
    <li> <a href="/">Home</a></li> 
    <li> <a href="https://github.com/reteps" >Github</a></li> 
    <li> <a href="gradecalc/gradecalc.html" >Grade Calculator</a></li> 
    </ul> 
</header> 

CSS

header ul { /*selects list of stuff*/ 
    list-style-type: none; /*no bullet points*/ 
    margin: 0; 
    padding: 0; 
    background-color: #70deef; 
    position: fixed; 
    width: 100%; 
    height: 50px; 
} 
header li { /*selects list element*/ 
    float: left; /*move to left*/ 
} 
header li a { 
    display: block; /*makes a square*/ 
    color: #ffffff; /*white*/ 
    text-align: center; 
    text-decoration: none; 
    padding: 20px 20px 10px; 
} 
header li a:hover { 
    background-color: #d6d6d6; /*grey*/ 

} 

Answer 1

がulタグに高さを削除します。あなたのブロックの高さは既に内容によって決定されていますfont-sizeとpadding（あれば余白/境界線）

Answer 2

ulタグの場合、決して高さ属性にはなりません。 これは不必要なギャップを引き起こす可能性があるためです。

ul { 
    padding: 0; 
    margin: 0; 
    overflow: auto; 
} 

この

は、ULタグの最小が、十分なスタイリングです