Adjusting drop down folder menu

Site URL: https://parsnip-indigo-wpbh.squarespace.com/config/design

Hello, 

I want the drop down menu of the site that I am working on to be aligned centered, instead of right, so that it falls right under the main title, but I can't seem to figure out how. I have tried different codes I've seen on here but none have work. Could anyone help? I also don't like how wide the drop down background is, is there a way I can change it to something that works better for my titles? I've already fixed the hover colour but I can't change these two other things.

the site isn't live yet as I am moving a 7.0 site to a 7.1 version and I am starting from scratch.

Thanks in advance.

Add to Home > Design > Custom CSS

/* Align center dropdown */
.header-nav-folder-content {
    left: 50% !important;
    transform: translateX(-50%);
    text-align: center !important;
}

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Align center dropdown */
.header-nav-folder-content {
    left: 50% !important;
    transform: translateX(-50%);
    text-align: center !important;
}

Thank you! do you know why:

1. Drop menu looks a bit pixelated and kind of like a bigger font in comparison to the main menu? I am using the mixed Lenoir font package, custom 15px base size.
2. Why when I click on that folder, all drop titles change to hover colour, instead of just the "Active" page or the page I am currently on?

thank you!