I've come across this design pattern a few times, a full width image with a logo and navigation aligned to it's edges at full screen but requiring a little spacing when the screen scaled down around it.
In order to get a nice reliable transition between the two I found the best solution was to extend the header by say 1rem and add the same amount of padding to either side. This ensures that the items line up when possible while maintaining a consistant distance from the container.