How to center the main menu bar on the front page

Yes, but it’s specific to your site.

Please provide a link to a page on your site where we can see this. Thanks.

The theme used is twentyseventeen

Please provide a link to a page on your site where we can see this. Thanks.

try this

.navigation-top {
    display: block;
    text-align: center;
}
ul#top-menu {
    display: inline-block;
}

To add or override CSS: use the “Additional CSS” option in the customizer. https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

Thank you. That worked perfectly on the computer screen which is where I wanted it centered. However it is now a hard center inline-block on the smartphone screen instead of a dropdown menu. Is there a way to keep as it was on the smartphone screen?

Yes. You need to override the default CSS for the menu when it’s in “toggle” mode. If you inspect the CSS of a page using Chrome’s mobile simulation, you should find that area of CSS.

How do I override the default CSS

>> To add or override CSS: use the “Additional CSS” option in the customizer. https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

Learn to use the Chrome Developer Tools to help you see and test changes to your CSS. <<

What code would I use for the top menu to be centered on the desktop screen only?

I found that if you go under the ‘site branding’ list on the style.css and you change the text align under the menu to center it works perfectly. Thanks for your responses.