I was able to fix your header on the desktop view
I did a lot of things there, most importantly is to tidy the Bars, Containers, and Elements side-margins and let the Flexbox do its thing.
I also did this to all your bars, this is to make the Header have the same width calculation/value as the content container. This what makes the header container and content container aligned.
Unfortunately, the way you construct the header is just too much for mobile responsive (or I just don't understand what you're trying to do), Either way, please remove all your duplicate elements/container that is for mobile view. And then start over a new Bar that will represent your header on mobile.
And also, please Clear and Deactivate your caching plugins and feature, as on this stage of development it does hindering the development more than helping. You won't be able to see your changes immediately with a caching plugin enabled. You might not able to see my changes on your end, if so, please clear your browser's cache.
I advise that you take time first to watch and read the following resources.
A Complete Guide to Flexbox
Hope that helps,