Nav dropdown menu with multiple columns falls off page

Site URL: http://www.gmc.org.sg

I found the code from another thread and put it into my site:

[href="/connect"]+.Header-nav-folder,

[href="/ministries"]+.Header-nav-folder,

[href="/resources"]+.Header-nav-folder {
    column-count: 2;
}

It works beautifully, only that the Ministries folder falls off the page and the Resources one doesn't work (screenshots attached). Is there a way to solve this? I removed the code for the 'ministries' item on the site so that it wouldn't be live.

Thanks!

Add to Home > Design > Custom CSS

[href="/ministries"] + span {
    column-count: 2;
    margin-left: -200px;
}
[href="/resources-1"] + span {
    column-count: 2;
    margin-left: -150px;
}

Thanks so much! It works but the columns are uneven and the hover underline of the last item in the first column appears at the top of the second column. How strange!

Have you solved it yet?

No I haven't solved it yet! Can you help?