How to centre navbar in Drupal 8 adaptive theme

Over that last few months I have been using the amazing Drupal Adaptive Theme for my Drupal 8 builds. The default main menu navigation bar does everything required for both desktop and mobile devices. I was asked by a client to centre the menu bar for both desktop and mobile. Initially I thought this would be a simple task, this was not so!

The menu bar is separated into a number of div's which include: class id's and div id's in both region and ul li div's so I thought I would share this css code which you can add to your stylesheet:

    
/* To centre menu nav bar */
.ms-dropmenu .rm-block__content .menu-level-1 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    display: inline-block;
    float: none;
}
#navbar {
text-align:center;
}
#navbar li,
#navbar ul.menu li {
float:none !important;
display:inline-block !important;
}
/* To centre menu nav bar */