Content Merged After Transparent Header Attempt

Hi there,

First time posting & using GeneratePress so feel free to perma ban me if this has already been answered before.

I was following the guide here trying to get a transparent nav effect. However, the content on the homepage and nav bar now overlap. This makes sense to me, however I feel as though I'm doing it wrong, and it isn't looking right so I must be missing something. Image Here: https://imgur.com/hh6BxoS

What I did to achieve this:
1. Created a new header element
2. Applied settings as per the guide above
3. Set the new element to be visible on the homepage only

What I want:
For the nav bar not to overlap with the content from the Gutenberg editor and to look more like the image in the tutorial linked above.

What I have tried:
1. Adding padding in the Page Hero tab for the new element
2. Adding a Gutenberg spacer block.

Any and all help would be appreciated!