A couple of questions about layout. How to fix?

Question

css

I'm building a website . The first question - when you hover the mouse over the Main Menu item, why is it not highlighted to the full width (from the right to the left border'a)? What CSS rule should be written?
The second question - if you scroll down the page to the item "TESTIMONIALS", there the title is made as h5 with the class "h5". I wrote the following CSS styles:

h5.h5:before{
    background-image: url(http://evolutionnailspanj.brandivo.com/wp-content/uploads/sites/30/2015/02/h5.png);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    width: 101px;
    height: 79px;
}

But the picture is not displayed, why is this happening?

Answer 1

1. The li in the menu has "display: inline-block", since the font size is not 0, 1 space is placed between such elements
2. The block is 19px high and the picture is 79px

Answer 2

on the second question - the picture is displayed,
it's just 101 * 79px, and the header height is only 20px

Answer 3

Add property
content: "";
position: absolute;
It will be like this

h5.h5:before{
    background-image: url(http://evolutionnailspanj.brandivo.com/wp-content/uploads/sites/30/2015/02/h5.png);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    width: 101px;
    height: 79px;
   content: "";
   position: absolute;
}