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: