You have entered an incorrect URL:
url(https://static1.squarespace.com/static/5e5d8db…/t/6438b10…/1681436993567/header+background.jpg) won't work.
Note the three dots in two places of the image URL in your CSS - in their place should be digits that form the URL of the background image.
Copy & paste the correct URL of the image, and it should show up as background for the header.
I was able to place images in multiple sections with background colors with no gap at all.
However, this only works if you have disabled the "Fill screen" option for these sections. This is because the minimum value for fill screen height is always 1 and not 0. In your case this might be the cause for that small gap that is visible between the edge of the image and the edge of the section. If not, I suppose it's a custom CSS issue.
I just saw that you can set the height value to 0 by typing, then even with the fill screen option enabled the gaps are gone.
VisualNotes's post in Custom Css Code not working was marked as the answer
