固定位置のナビゲーションバーの色を変更するにはどうすればよいですか？

Question

私は "背景色"を追加しようとしていましたが、位置によってはヘッダーimgとヘッダーnavの間に大きな空白が残っていました。位置がなければ、ヘッダーnavは私が望むところにはありませんすること

（その私のシラバスとイムにちょうどコードに出始めていないので、私は任意のブートストラップまたは何を使用することはできません）
（右方向）これは私のコードです：

header { 
 
    margin-top: auto; 
 
    height: 79px; 
 
    overflow: hidden; 
 
} 
 

 
header img { 
 
    float: left; 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
} 
 

 
header nav { 
 
    float: right; 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
    height: 79px; 
 
    left: 542px; 
 
}

<header> 
 
    <a href="index.html"><img src="images/greylogo.png" alt="E R I" /></a> 
 
    <nav> 
 
    <ul> 
 
     <li> <a href=#> Home </a> </li> 
 
     <li> <a href="aboutme.html"> About Me </a> </li> 
 
     <li> <a href="events.html"> Events </a></li> 
 
     <li> <a href="contact.html" target="_blank"> Contact Me </a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

ポーあなたのCSSがかなり台無しにされ

header { 
 
    height: 79px; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    width: 100%; 
 
    background: lightblue 
 
} 
 

 
header img { 
 
    float: left; 
 
} 
 

 
header nav { 
 
    float: right; 
 
} 
 

 
header nav li { 
 
float:left; 
 
}

<header> 
 
    <a href="index.html"><img src="images/greylogo.png" alt="E R I" /></a> 
 
    <nav> 
 
    <ul> 
 
     <li> <a href=#> Home </a> </li> 
 
     <li> <a href="aboutme.html"> About Me </a> </li> 
 
     <li> <a href="events.html"> Events </a></li> 
 
     <li> <a href="contact.html" target="_blank"> Contact Me </a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 2

...ヘッダーない内容sition、私はBootstrapのようなライブラリを使用して学習することをお勧めします、あなたのコンポーネントを配置することは、それが簡単になりますあなたのnavbarの問題は、それが固定された高さ（79px）があなたのリスト（ul）が79pxより大きいということです。