Question: I made a simple navigation menu using a ul, but when you hover over it, the background color will not change the entire background. I think it may have to do with my `padding` elements. How do I fix this?

Here is a Fiddle of my code: <https://jsfiddle.net/b8js8zkq/>

I have looked at [How do I make the hover background color fill the height of the link?](https://stackoverflow.com/questions/24284220/how-do-i-make-the-hover-background-color-fill-the-height-of-the-link) and did not find a good answer there, so please don't mark this as a duplicate of that.

Answer: 
The problem with your code is, you have `margin` and `padding` on both `<h3>` and `<li>`. So remove them and add them as `padding` to the `<a>` tag. And you are done!

The `padding` and `margin` of each `15px` constitute `30px` of total `padding` to `<a>`. That's what I have done below:

```css
.header li {
  border-bottom: 1px solid #888;
  font-size: 20px;
  padding: 0;
}
ul h3 {
  margin: 0;
  padding: 0
}
.header a {
  display: block;
  padding: 30px;
}

```

**Fiddle: <https://jsfiddle.net/19r4a4ft/>**
[jsfiddle update](https://jsfiddle.net/thefto_dev/b8js8zkq/2/)

Old

```
 .header a:hover {
  background-color: #f3e5d8;
}

```

New

```
.header li:hover {
   background-color: #f3e5d8;
}

```

You want to change the color of the li element rather than just the a tag