Folder: Alignment & colour on hover

Hello.

I have added some css to change a folder on my primary menu but I have two issues that I need assistance with:

1. I want the drop down folder and it's pointer to be centered with the name of the menu item, and
2. How do I get the colour on hover to go right to the edges (left and right) instead of stopping short.

For the life of me I can't work either of these issues out.

Website: https://stephanie-g.net/

TIA

@StephanieG Add to Home > Design > Custom CSS

Question 1.

/* Center Dropdown */
.Header-nav-folder {
 margin-left: -2em !important;
}

Question 2. Change padding: 7px !important; to padding: 7px 0 !important;

in the following code

.Header-nav--primary .Header-nav-item:nth-child(2) .Header-nav-folder {
   background-color: #f4afcf !important;
   min-width: 100px !important;
   color: #fff !important;
   font-family: karla,sans-serif;
   font-size: 12px;
   padding: 7px !important;
   text-align: center;
   letter-spacing: 1.5px;
}

@tuanphan Thank you, thank you, thank you - worked perfectly.

I have spent days on this... I knew it had to do with margins and padding but couldn't work out what..

cheers

Stephanie

@StephanieG

You're welcome. I see instagram (footer) has double underline. Do you want to remove 1?

Click Accept Answer if it worked. Other members can use if they know it worked. Thanks.

@tuanphan yes please!

Steff

@StephanieG top or bottom underline?

The bottom one.

Thanks!

@StephanieG Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1562850051883_30319 a {
   border-bottom: none;
}

@tuanphan thanks, you are too kind.

Stephanie