Div moving on screen size change - html

Question

I have a static HTML website that works perfectly, apart from the footer. Essentially, the footer is an image in which has text overlap. When the screen size is changed, the elements on the page move with it to fit the screen. Except for the footer text. I cannot workout what i am doing wrong and fairly positive that this is something so simple i've missed.
Here is a diagram of what is happening and what i need it to do:
So, the text box (in white for demo purposes), is aligned with the left box/edge above. Even when the screen enlarges and shrinks, i need the text to remain in line with that 'marker'.
However, when i enlarge the screen, you can see that the white box above moves, yet the text does not go with it!
The code for the footer is as follows:
<div class="orangeFooter">
<img src="images/orange-footer.png">
<h2><span class="orangeText">Promoting a knowledge based NHS</span</h2>
</div>
And the CSS:
.orangeFooter{
margin-top:40px;
width:100%;
position:relative;
height:133px;
}
h2 .orangeText{
background:#fff;
padding:7px;
font-size: 40px;
}
.orangeFooter img{
width:100%;
height:100%;
}
.orangeFooter h2{
position:relative;
font-style:italic;
left: 210px;
bottom:80px;
font-size: 40px;
}

Answer 1

Use this CSS:
.orangeFooter h2 {
position: relative;
font-style: italic;
/* left: 210px; */
bottom: 80px;
font-size: 40px;
display: block;
margin: 0 auto;
width: 1016px;
}
It makes the h2 1016px wide (which is the width of your site). it also centers it in your site (with the margin: 0 auto;)