How to design HTML for iPad?

I'm trying to optimize one of my pages for iPad. You can see my test-page here: http://demo.dennismadsen.com/ipad/

It contains a black box with a width of 800px. When I see it on my iPad and take a screenshow, I can see, that the box is more when 800px width - about 837px: http://demo.dennismadsen.com/ipad/screenshot.png

I'm wondering why this is happening?
The width of the screen is 1024px in landscape. If I'm showing a box with a width of 1000px I'm not seeing any margin on the right:
http://demo.dennismadsen.com/ipad/index2.html

Please try to visit this page:
http://demo.dennismadsen.com/ipad/example.html

It's 1170px + 50px padding. It's too big for the landscape mode. When visiting the page, I expect that iOS will zoom out and view the complete page from left to right. But I cannot see the last part of the right side on my iPad.

Why?

Cabbit said:

You better using a width of 100% and then em based measurements for children this is what i had to do to get my uni work working on the iPad.

Click to expand...

I'm not sure, where you think I should have the 100% width? I do not like the site to be 100% on a screen with a width of, for instance, 1600px. What about the childs you are talking about?