Trying to figure out why content div is going under the header div

Hi.

So I'm trying to build a custom design using the "Tasty" site from the library as a base. The design concept is here:
https://wordpress-151076-838117.cloudwaysapps.com/design

And my current work is here: https://wordpress-151076-838117.cloudwaysapps.com/ (all the bits are not in place yet.)

The problem is that when I try to make the content div (#content) go up to sit inside the header banner image by giving it a negative margin-top: -570px, the div just slides *under* the header banner instead of going on top of it like I expect it to.

Any idea why this might be happening? Changing z-index didn't fix anything.