White space between header and posts, mobile view

I have an issue on my planned site cheeselogs.co.uk that I can’t seem to resolve easily regarding the header.

I have installed the header REEL NEWS PRO on the site, it displays fine on desktop but on mobile view there is no white space between the end of the header and the start of the post (as seen on the left).

Using the Inspect function on the website, I can force it on the .tdi_3 tag.
The CSS would be:

@media (max-width: 767px) {
.td-container, .tdc-row, .tdc-row-composer {
width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-block-end: 18%;
}
}

But I can’t seem to make this work on custom code.
Have got myself into a right tizzy with this header … have added custom code to force display of the SVG to none, and have probably added additional unlogical code to try and get it to do what I’m intending.

Some pointers would be appreciated. Thank you!

(For a future update, please consider adding more customisation to the header to make it easier to adapt)