how to center text in drop down menu with 5 columns horizontally across the page?

Site URL: https://synthesizer-round-wsrr.squarespace.com/config/design/custom-css

Hi there, all this has been very helpful, and I'm close to the result I want. I want my drop down text to be horizontally spaced in columns across the center of the page, like in this website example below.

In my website I'm getting this result below - the text is to far to the ends of the screen.

Additionally, I also want the hover text to be underlined like in the example. 

Any help would be much appreciated - I am experimenting with 7.1 for this, but my current site is on 7.0, so if there is code that would work for 7.0 that would be so helpful too. 

22 hours ago, Supermrin said:

Site URL: https://synthesizer-round-wsrr.squarespace.com/config/design/custom-css

Hi there, all this has been very helpful, and I'm close to the result I want. I want my drop down text to be horizontally spaced in columns across the center of the page, like in this website example below.

 

In my website I'm getting this result below - the text is to far to the ends of the screen.

 

Additionally, I also want the hover text to be underlined like in the example. 

Any help would be much appreciated - I am experimenting with 7.1 for this, but my current site is on 7.0, so if there is code that would work for 7.0 that would be so helpful too. 

Your site is private now. Kindly share it with the protected password to check your issue