Header Nav Folder to center text on hover

I'm trying to get my code to hover under the folder text and not the folder itself (under commercials)

I took the code from here and added another code for the lines to show up under the folder: https://www.ghostplugins.com/steps/8gk3nf7j

Here's the code I have so far

// Stretchy Navigation Line - v2 //
.header-nav-item::after {
  content: '';
  background: #FFF; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-folder-item::after {
  content: '';
  background: #FFF; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}
.header-nav-item:hover::after {
  width: 100%;

}
.header-nav-folder-item:hover::after {
  width: 75%;
}

Please help! thank you

What is your site url? We can check problem easier