Your pinning was just a little weird. You have to decide wether to pin it to browser (6 point pinning) or to a container (three point pinning).
You could delete a lot breakpoints at your master, this reduces the file size tremendous.
In this link you find your file changed as I understand your setup. Feel free to change whatever you need to change.
Pinning in 2018 is used a little different as in the previous versions, it must be used less.
In your case with the "pinned to top" header I pinned everything inside the header the same way – to the top center, so it stays and doesn´t move around.
You may realize in smaller breakpoints, that I decided to scale the header in height. You could, btw, easily see the approach
if you use this grey scrubber on the right hand side at the breakpoint bar and watch if everything behaves as intended.
You also may realize that I didn´t change all breakpoints, as I think you have to do some decisions in smaller breakpoints.
Thanks very much for the help with this. Really appreciated!
Sorry I'm still really confused by the new pinning method. I can't see how you can have a 1920 pixel and the next one at 970 and still use that one break point. It just doesn't work in my opinion. Surely you have to do have a breakpoint at every single point along where you can reassign the positions of components and resize fonts. This is why I had so many breakpoints.
But as you see in my file, there was no realigning necessary on your master page.
I just centered all elements in your header until the 960. So it keeps its position.
If you use the scrubber, you see that it works as intended from my side.
Be aware, that breakpoints on master and their respective pages do not have to be the same.
In your case, because you did not use a menu so far you do not need that much breakpoints on master.
Because the file size increases very much with each breakpoint, I would need as little breakpoints as possible.
If you need some more support, let me know. Change your file, add some elements and we keep on.