Active Underline Whole Folder

Dear community

I have added the following CSS code to underline the active pages on my page.

.main-nav ul li.active-link a, .main-nav ul li.active-link a:active {
     text-decoration: underline !important;
  } .main-nav a:hover {
     text-decoration: underline !important;
  }

Now the problem is that the whole navigation folder gets underlined, but I only want the actual site.

How can I do that?

Somehow excluding the other pages in the folder?

Here's my page:

pascalreinmann.com

Thanks for you help!

remove your code, and use this

.main-nav ul li.active-link>a, .main-nav ul li.active-link a:active {
    text-decoration: underline !important;
}

thanks a lot tuanphan! 

@tuanphan

There is another problem with my mobile version. How can I adjust the padding for the folder here on the mobile version? and make it "drop-down" as on the desktop version?

#mobileNav .mobile-folder>a {
    margin-left: 1.5em !important;
}

great - thank you!