Main Logo - Spilling Out

My main logo for my site works perfectly in 1280x1024 resolution on all browsers.

Unfortunately at 1024x768 everything comes undone and the logo is too long.

I know there is probably a fix in the custom template css file but i just don't know where to go and there are so many threads on this and i can't find the information as the search function doesn't guide me to it ( or i don't know what wording to put in to find it )

Can someone look at my site it's https://www.darkrealmfox.com/catalog and look at it at the 1024x768 resolution and tell me where to go to fix this problem.

The template i am using is Arch Shoppe. Oh and sometimes the right side boxes seem to go out of the template instead of staying in ( at 1024x768 )

The header issue is that your image is One Giant image that is 1243px wide

Options:

Set your mainWrapper width from 100% to 1243px

Seperate this image into a logo and a background image that is about 5-30px wide and repeat it

I would prefer to separate into a logo and background image - How does that work ?

I mean what do i do to get that to work as i have the programs installed to do it i just need precise instructions ?

Thanks for the previous advice the 100% works but it does mean people need to scroll sideways which i would love to avoid hence how do i separate logo and background ?

Ok i re-edited my logo and changed main wrapper to 988px - works perfectly in 1024x768 resolution but has borders in 1280x1024 resolution.

Does this look okay ?

Is it possible to have full screen for both resolutions ?