Removing underline from menu (hover and active)

After trying multiple CSS lines of code, I can't get the underline hover to not be displayed. I've tried some solutions from this forum without the CSS code I provided with this post, but didn't change the outcome. At this point I'm clueless on why it's not working, my basic understanding of how CSS works is maybe the reason why haha.

This is the CSS that I've used is to create a pill shaped menu hover and active links and an inverted menu for larger screens. Any help would be greatly appreciated, thanks!

Link to my website: https://jensdemarest.squarespace.com/

/*
===================================
  		INVERTED MENU	
===================================
*/

@media screen and (min-width: 800px) {
  .header {
    mix-blend-mode: difference;
  }
}

/*
===================================
		PILL SELECTION
===================================
*/

.header-nav-item a {
  padding: 5px 12px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}

.header-nav-item a:hover {
  background: #808080;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}

.header-menu {
  .header-menu-nav-item a {
    display: inline-block !important;
    .header-menu-nav-item-content {
      background: none !important;
    }
  }
}

.header-nav-item--active a {
  background: #ffffff !important;
  color: #000 !important;
  border: 1px solid #ffffff!important;
  padding: 2px 15px !important;
  border-radius: 50px !important;
  background-image: none !important;
}

@jaeveedee, That's it! Yes, I'm sorry, was presenting it to someone and forgot to add the CSS code back. Everything works now. I had no idea the underline hover was part of the animation settings, that explains why I haven't had any problems before with other websites... You really cured my headache for today haha, thank you so much!