Hej, jag har 2 problem med min HTML kod. Och undrar om de finns någon där ute som vet hur man kan lösa de! :)

Först och främst.
https://gyazo.com/083668308f6c26a14decbf992845dbad
Jag vill att själva "menyn" kommer i mitten, precis under headern. Någon som vet hur man får dit den?

De andra.
https://gyazo.com/29a086d9120206f6e17128f42a2fa206
Den svarta bakrunden täcker inte hela menyn.
Jag har den på :
#menuBar a:hover{
background-color: black;
padding-left: 20px;
color: red;
text-decoration: none;
text-align: center;
}


Jag vill alltså att när man håller musen på länken så ska de bli en svart bakrund så som den är, fast jag vill att de ska täckas hela vägen upp till menybar kanten.

Här är hela koden iaf!

body {
background-color: white;
}
#header{
background-color: #303030;
color: red;
width: 100%;
height: 100px;
font-size: 35px;
margin-top: 1px;
}
#menuBar{
background-color: #303030;
width: 100%;
height: 30px;
margin-top: 20px;

}
#menuBar ul{
display:inline;
}
#menuBar li{
display:inline;
text-align: center;
line-height: 30px;
font-size: 20px;
}
#menuBar a:link{
background-color: #303030;
color: red;
text-align: auto;
width: 30px;
height: 30px;
padding-left: 20px;
font-family: "Airstrike";
padding-right: 30px;
padding-top: 2px;
}
#menuBar a:visited{
background-color: #303030;
color: red;
padding-left: 20px;
text-decoration: none;
font-family: "Airstrike";
text-align: center;
}
#menuBar a:hover{
background-color: black;
padding-left: 20px;
color: red;
text-decoration: none;
text-align: center;
}
#menuBar a:active{
background-color: black;
color: blue;
text-decoration: none;
text-align: center;
}
#main{
background-color: #303030;
color: white;
width: 100%;
height: 800px;
margin-top: 10px;

}