Fix/348 centering main nav

[ciprianimike]

Description of the Change

The problem occurred on tablets and desktops, I update the header-menu SCSS, the menu is now centered for all the breakpoints:

• mobile
• Tablet
• desktop
• large-screen

Verification Process

Breakpoints tested with Chrome Dev Tool, iOS simulator, Android Emulator and iMac 27" and iPhone 11 Pro as physical devices.

Checklist:

• [x] I have read the CONTRIBUTING document.
• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have added tests to cover my change.
• [x] All new and existing tests passed.

[jeffpaul]

@tlovett1 you 👍🏼 for this to get merged in?

[joesnellpdx]

@tylercherpak @ciprianimike @dmtrmrv

I made some changes to the styles here: https://github.com/10up/Engineering-Best-Practices/pull/349/commits/343aefac26fd741014be7021aa64e13ebe8763fc

I'm not sure if the content changed while this was waiting to be merged, but found issues with the layout (particularly after the nav break and up to 900px viewport widths).

If I can get your approval on the current state, I'll merge it in.

This change will make the other MR here mute: https://github.com/10up/Engineering-Best-Practices/pull/352

https://drive.google.com/file/d/1dWK5vcqpe7ujYyQ4bXTvZkqhKgWxZCRa/view

CC: @jeffpaul

[joesnellpdx]

@tylercherpak One edge case bug found by @dmtrmrv I need to investigate and provide a solution before we continue.

[joesnellpdx]

@dmtrmrv Fixed issue where is-open style caused layout issues on mid/large screens. Please review

Pull latest to see changes

[dmtrmrv]

@joesnellpdx I tested the recent fix and it looks good to me. Layout stays consistent when user resizes the window.