Header Menu not aligned

The header Menu on my site is not aligning horizontally. The logo on the left is not lining up with the links on the far right as seen in the attached screenshot.

Please is there a way to fix this?

URL:https://trainingwithshirley.com/

Password: train

You can add this code to Website > Website Tools > Custom CSS

.header-nav {
    line-height: 2em;
}

Let me know if it work for you. 

8 hours ago, DavidStewart said:

You can add this code to Website > Website Tools > Custom CSS

.header-nav {
    line-height: 2em;
}

Let me know if it work for you. 

Hey David, thanks for your response but it still looks the same to me. Desktop view is not as obvious. The tablet view is significant. Screenshot attached.

URL:https://trainingwithshirley.com/

Password: train

It looks perfect on both of my browsers. (Mozilla and Chrome.) Can you check from other device and browser?

3 hours ago, DavidStewart said:

It looks perfect on both of my browsers. (Mozilla and Chrome.) Can you check from other device and browser?

Are you using Mac or Windows to view?

10 hours ago, DavidStewart said:

It looks perfect on both of my browsers. (Mozilla and Chrome.) Can you check from other device and browser?

I'm viewing on iMac and the header menu is not aligned on Mozilla and chrome.

Can anyone help pleaase?

I see it already fine