The navigation bar at the top demonstrates a full width menu that centers the main menu items horizontally.

Custom CSS: 

1.
2.
3.
 
#nav .menu {
    margin: auto !Important;
}

Similarly, if you want to use the popup menu widget to display a full width menu that centers the main menu items horizontally, use the CSS class option of the widget to add a custom class to it (e.g. centered_menu) and use this class instead of #nav in the style.css of your child theme: 
1.
2.
3.
 
.centered_menu .menu {
    margin: auto !Important;
}