How can I position my Button in the middle of my aligned image?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home

Hello, I am trying to organise my image in such a way so I can have a button positioned on top.

I have done this by setting my image as a background, so I can add a button block on top.

I have also used some code to tweak the position of where my image sits on the page. Here is the code:

/* INSET LEVELS ON 1ST HEADER SECTION */
[data-section-id="6034c2b9d8e50b04d5651ea4"] {
 .section-background {
    top: 5vw!important;
    right: 3vw!important;
    bottom: 5vw!important;
    left: 21vw!important;
  }
}

Unfortunately, now my button no longer looks like it is in the middle of the 'image' rather it is naturally in the middle of the 'page' still, please see attached.

How can I move the button (and above green image) so it sits more in the middle of the main image?

I'm not sure if there is a better way to do this - I tried to add a spacer left (next to my nav links), and the image to the right of the spacer (so the spacer could push the image into position), but I can't figure how to add my green image and button on top of an image block.

Please help!

Page = https://bluebird-porcupine-yzdg.squarespace.com/home

Pword = bluebird (may not need pword as site is live)

 Many thanks!

Hi. Do you still need help on this?

Yes please Tuanphan, I'm still not sure how to fix this. It currently looks a little odd!!