Navigation underline extends beyond text

Hi Guys,

I am having trouble  with the underline on my top navigation extending beyond the word. Can anyone help me with this? 

https://www.rhodesdesign.co.nz/

Some help would be greatly appreciated

This is the CSS code: 

/*
===================================
START SITE NAVIGATION - THIS MAKES THE MENU SPLIT ACROSS THE SCREEN
===================================
*/

.header-nav {
  width:100%;
}

 
.header-display-desktop .header-nav .header-nav-wrapper  {
    position: absolute;
    width: 100%;
    top: 25px;
}
.header-display-desktop .header-nav .header-nav-wrapper .header-nav-list {
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.header-display-desktop .header-nav .header-nav-wrapper .header-nav-item {
  flex-grow:1
}

.header-display-desktop .header-nav .header-nav-wrapper .header-nav-item:nth-child(3) {  
  flex-grow:80    
}
/*
===================================
END SITE NAVIGATION - THIS MAKES THE MENU SPLIT ACROSS THE SCREEN
===================================
*/
 

Given the way this code works, I would recommend getting rid of the underline effect as it will always give you problems since the size of the lowest a element is made wider to create the space. This should do that for you adding the Custom CSS:

.header-nav-item a {
    background-image: none !important;
}

If you want a different hover/active effect, that could be added (color, opacity etc.)

Thanks so much for the response. I was quite fond of those underlines but perhaps I figure something else out. Given that the underline won't work would you be so kind to help me adjust my code to make the changes below? 

To navigation use:

'ArticulatCF-Medium' 

Change from black to this: #9c9288

On hover change to black #000000

And on the landed page it stay the colour black #000000

If you are able to weave in that these changes are made for not just desktop but also mobile and tablet that would be AMAZING!

Thank you! 

Do you still need help?