Brine Main Navigation Underline in Folder CSS

Site URL: https://mokshatransformation.squarespace.com/

Hello there, I am using the below code to create an underline effect on my main navigation.... (site password is: Moksha)

// Center Nav Line //
@media all and (min-width:770px){
header nav a{
  display: inline-block;
  float: none; 
}

header nav a:hover:after{
  transform: scaleX(1);
}

header nav a:after {
  display:block;
  content: '';
  border-bottom: solid 1px #cda05a;
    padding: .4em;
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  z-index: 999;
 }
}

It works great until you get to the page titles within a folder. The width of this underline appears wider than the wording. Is there a way for this to be corrected? Just so the underline width is the same width as per the wording.

Many thanks in advance for any help. 

Add this CSS

/* Fix folder underline */
a.Header-nav-folder-item:hover {
    display: inline-block;
}

Genius! Thank you!!