Header text positioning

Hi, I'm using the Divi Builder with Custom Global Header for designing a header with text overlaying a background vector image (shown in grey with a no-go area shown in green where I don't want the text to come close to or overlap).

I'm trying to align the text towards the right as shown (H1 text shown in bold, H2 in regular) on a section of 1024 by 300, for the desktop site.

Currently I'm using a fullwidth section and fullwidth column and trying to position text using -9vh Margin for Row spacing from top and 7vw for Text Module Padding from Right. The problem is that on smaller desktops the Hero text shifts towards the green 'no-go' zone of my header image background.



What is a better way to keep the text fixed across desktop resolutions? And is using tab spacing in the text editor the optimal way to position the lines of text?

Thanks.

 

It hasn't been deployed, it's on my localhost.

 

Thanks for taking the time to answer and sorry if it's not clear.

I can test how headers perform at various desktop resolutions on my local site using Google Developer Tools Device Mode https://developers.google.com/web/tools/chrome-devtools/device-mode

At 1024*600 resolution the Hero text becomes centred on the screen and is intersecting the edge of the no-go zone. And at 1920*1080 the hero text is on the right of the screen as shown below, which is where I want it.


The hero text gets closer to the no go zone of my background image with decreasing screen size (on desktops) and further away with increasing screen size.

I'm currently using vh and vw to adjust the hero text position. I'm using a 1 column row and the Custom Global Header option on Divi Builder.

 

Partially Solved: I used additional CSS to adjust the hero text module.

https://internetingishard.com/html-and-css/flexbox/#aligning-a-flex-item

display: flex;
justify-content: flex-end;
align-items: flex-start;