Positioning Multiple Header Images in Wordpress

PLEASE can someone help - tearing my hair out and trying everything on my second ever Wordpress site!!

I am creating a header composed of different images layered with z-index settings. They look fine with the browser at normal size; as soon as I resize the browser my main 950px wide image (mainarchimage)moves with the rest of the site but all the other images stay put and won't move.

My test site is www. http:// jwebsites.co.uk/etica/ - theme is Unique Websites

RELEVANT CODE FROM HEADER FILE:


`<div id="mainarchimage">
<img src="http://jwebsites.co.uk/etica/wp-content/themes/UniqueWebsites/images/arch-masons.png" />
</div>

<div id="mastheadwrap">
<div id="masonsmeeting">
<img src="http://jwebsites.co.uk/etica/wp-content/themes/UniqueWebsites/images/suffolk-royal-arch-meeting.jpg" />
</div>

<div id="masonicjourneyimg">
<img src="http://jwebsites.co.uk/etica/wp-content/themes/UniqueWebsites/images/masonic-journey.png" />
</div>

<div id="archoutline">
<img src="http://jwebsites.co.uk/etica/wp-content/themes/UniqueWebsites/images/arch-outline.png" />
</div>


<!-- end of mastheadwrap div -->
</div> `

RELEVANT CODE FROM CSS:


`#header {
height: 543px;
margin-bottom: 0px;
margin: 0 0 0 0px;
padding: 0 0 0 0px;
overflow: hidden;
position: relative;

}
/* --------------[ header section ]-------------- */



#mainarchimage {
margin: 0 auto;
padding: 0 0 0 0;
height: 513px;
width: 950px;
position: relative;
top: 0px;
left: -12px;
border: 0px;
z-index:50;
}
#mastheadwrap {
height: 513px;
width: 950px;
padding: 0 0 0 0px;
margin: 0 0 0 0px;
position: relative;
}
#masonsmeeting {
margin: 0 auto;
padding: 0 0 0 0;
height: 312px;
width: 590px;
position: relative;
top: -290px;
left: 124px;
z-index:30;

}


#masonicjourneyimg {
margin: 0 auto;
padding: 0 0 0 0;
height: 38px;
width: 576px;
position: relative;
top: -358px;
left: 140px;
z-index:40;

}
#archoutline {
margin: 0 auto;
padding: 0 0 0 0;
height: 285px;
width: 550px;
position: relative;
top: -644px;
left: 143px;

z-index:90;

}`

You can see from this I tried putting a 950px wide mastheadwrap div with relative position to hold the images but they don't seem to take any notcie of this and they stay static on the screen.

PS Please take no notice if images aren't properly aligned - once I can get the principle sorted, then I'll go back and minutely position each image.

 

Eventually after LOTS of searching managed to fix this be adapting the css from the morning coffee theme - involved a triple wrap of div inside a div inside a div to fix this; different fromt eh double wrap I've used in the past.