Hover doesn't cover the full <div>

Question

Hi all,

I have a navbar list but when my mouse hovers, there's a section at the left that doesn't change colour. I'm assuming this is a margin issue? Please help :(

<h1> Hair and Nails </h1>

<div id="navbar">
<ul>
<li> Nails </li>
<li> Hair </li>
<li> Beauty </li>
<li> Holistic </li>
<li> Prices </li>
<li> Find Us </li>
</ul>
</div>

#navbar {
padding: 0;
background-color: rgba(249, 70, 46, 0.5);
color: white;
width: 250px;
}

#navbar li {
display: block;
padding: 8px 70px;
font-weight: bold;
color: white;
font-family: bitter;
text-decoration: none;
text-align: center;
}

#navbar li:hover {
background-color: rgb(249, 70, 46);
text-color: white;
}

Answer 1

Try to put the "background-color: rgba(249, 70, 46, 0.5);" from #navbar to #navbar li