に問題がありfloat:left、左側に隙間がないようにナビゲーションバーにカーソルを合わせたいと思ってfloat:leftいます。これを使用して修正できますが、追加float:leftする#topnav ul li aと背景色が削除されたように見えますか? ここに私の現在のcssがあります:
body {background-color:#CDCDCD;}
h1 {font-family:arial, Geneva, sans-serif;}
h2 {font-family:arial, Geneva, sans-serif;}
li {list-style:none;}
a:link { text-decoration:none; }
#container {width:900px; margin:0px auto; background-color:#FFFFFF; border:1px solid grey;
#top { background-color:#000000; width:100%; padding:10px 0; overflow:hidden; }
#logo { margin:0 0 0 10px; float:left; }
#social-media {float:right; margin:15px 0px 0px 0px; }
#social-media p {color:#ffffff; margin: 0px 0px 0px 25px; }
#social-media img { width:24px; height:24px; margin:0px 5px 0px 0px; }
#social-media ul li { display:inline; }
#topnav { background-color:#333333; clear:both; width:100%; }
#topnav ul { margin:0px; background-color:#333333; }
#topnav ul li { display:inline; }
#topnav ul li a { padding:10px 20px; font-family:Verdana, Geneva, sans-serif; display:inline-block; }
#topnav a:link { color:#ffffff; }
#topnav a:visited { color:#ffffff; }
#topnav a:active { color:#ffffff; }
#topnav a:hover { color:#ffffff; background-color:#770000; }
#topnav a:focus { color:#ffffff; }
#footer { width:100%; background-color:#333333; float:left; }
#footer p { text-align:center; color:#ffffff; font-size:12px; }
#footer a:link {color:white;}