Hello,

Will you please look at my code and tell me what I am doing wrong? I have added padding to my inline nav bar, but I cant get the background color in active and hover states to bleed over into that padded area. Any help is greatly appreciated!! Code below:

<nav>
<ul>
<li id="active"><a href="index.html" id="">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Custom Homes</a></li>
<li><a href="#">Remodels</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>



nav {
background-color: #fff;
padding: 10px;

}

nav li{
display:inline;
list-style: none;
}

nav li a {
padding-right: 25px;
padding-left: 20px;
text-decoration:none;
color: #333;
}

nav li a:hover{
color: #FFF ;
background-color: #a10324 ;
}

nav li#active a{
color: #FFF;
background-color: #a10324;
height: 41px;
}

ul {
background-color: #fff;

}