Images keep shifting depending on screen size. Can someone please help?

Okay so I just spent 8 hours getting the nivo-slider installed and making it compatible with the main 3 browsers. Now when I get on my ipad to look at the screen the header is shifted to left although it looks fine on my laptop.

Can someone please view my source and give me suggestions, Thank开发者_如何学运维s in advance!

My guess it has something to do with positioning, but can find which one, Thanks again

www.gudskunc.com

---

Check out the site with as many browsers as you can: Safari, Chrome, Opera, Internet Explorer, etc. In Safari and Chrome, the banner is shifted to the left.

There are a bunch of things that need work, but a big one (and the fix here) is to structure things efficiently. Right now, your navbar, banner, and page content are all separate elements, and you use the ancient center tag to keep everything in the middle of the browser. Instead, scrap the center tags and wrap everything in one element...

<div id="container">
     <div id="header">
          ...
     </div>
     <div id="banner">
          ...
     </div>
     <div id="content">
          ...
     </div>
</div>

Then, in your CSS, you can easily center the whole thing at once:

#container { display: block; width: 950px; margin: 0 auto; }

Make sure that the structure of your HTML is making your life easier!