Well thanks to Julien and Alastair, I have identified the problem, but still no solution.
I have 850px put on my body selector so that my website is centred on my webpage ie.
background: url(images/background.jpg) center top repeat-y;
font-family: Verdana, Arial, Helvetica, sans-serif;
If I remove this or change it to 100% it fixes my lightbox problem, but the website content is not neatly centred over the background. I tried Alastairs suggestion as well but this didn’t fix the problem.
Is there another way to over ride the width value of the 850px on the body for the overlay selector or is there another way to centre my text in my page not using the 850px width along with the other selectors?