How do I prevent a huge space between my active navigation link and the underline

Site URL: http://hellololo.net

So I know what the problem is but let me explain how I got there first~   http://hellololo.net  

I wanted my active page to be underlined in then navigation and I found this amazing code on this forum: 

/* Nav active link underline */
.main-nav ul li.active-link a {
    border-bottom: 1px solid black;
    padding-bottom: 0px;
}

It worked just fine when the navigation and logo were centered, but when I moved the header to what it is currently, the underline got pulled down to whatever size the logo is. If I reduce the size of the logo, the underline moves closer to the navigation. If I increase the size of the logo, the line moves farther away from the navigation. 

How can I keep my logo image the size it is, while moving the underline where I need it to be? 

Thank you so much~

PS. Another size question if I may. Is there a way to keep the navigation links to the left and center the logo with social media links in the right corner? 

I have the same question. Following

15 hours ago, jopepo said:

I have the same question. Following

Can you share site url? We can check easier

On 10/21/2020 at 3:39 AM, tuanphan said:

Can you share site url? We can check easier

Sorry for replying so late! my url is http://hellololo.net

On 1/9/2021 at 11:39 AM, hellololo said:

Sorry for replying so late! my url is http://hellololo.net

Remove code & add new code

li.active-link a {
    text-decoration: underline !important;
}

On 1/10/2021 at 1:42 AM, tuanphan said:

Remove code & add new code

li.active-link a {
    text-decoration: underline !important;
}

 

Woah! Thank you so much! Is it possible to increase the padding between the text and the underline?