Centre menu but without affecting sub menu items

Hi,

My site can be found here: https://www.regardingthemusic.com/

I’m trying to center the navigation menu at the top of the page, below the site title. While I’ve succeeded in doing so through the use of the following code…

#main-navigation .sf-menu {text-align:center; height:50px;}
#main-navigation .sf-menu ul {display: inline-flex;}

…said code also means the sub menu items (specifically the posts I have set as sub menu items when hovering over ‘Images’) line up across the page. Previously they would stack on top of each other in a list.

Wondering if I can keep the main navigation menu centered but revert the sub menu items to their previous formatting?

Any help would be greatly appreciated.

Thanks in advance.