Header moves around when zoom on browser

[suavedesign]

Everything on my site looks fine when viewed from a normal, 100% zoom. When I zoom either in or out, the slogan and some other info on the header jump around on the page- either to the left or to the right. How can I fix this issue?
The url is www.accupresh.com
I hope someone can help me out with this one!
Thank you.

[suavedesign]

Actually, now it's just the widgets on the header that move around.
Any idea why??
Thanks.

[simplypixie]

I am not sure why you have so many stylesheets and inline style as well, but I think I have found your class for the widgets which has a right margin of 500px so it will always be pushed 500px from the right of the containing box as the page (and therefore the containing box) gets bigger or smaller.

Where exactly do you want the social icons positioned in realtion to the other content in the header?

[suavedesign]

Thanks, Simplypixie. (I am working on condensing all the stylesheets... ) I now gave the widgets a

margin-right:auto;

and

margin-left:auto

so that it doesnt jump around on the page. Problem is, it's in the center (since it's set to auto), but that's not where I want it to be.
I want it under the phone number in the header- which would be more to the left of the page. How do I make it stay there, even when the page is zoomed??
Thanks...

[JorgeM]

Another suggestion for you...dont place any elements before your DOCTYPE. It causes IE to go into quirks mode.

[simplypixie]

Looking again at your CSS and HTML I see you are using a grid system and so you need to use that for your widgets as well and if you want to position to the right you use the .push-number-of-columns to move it across that number of columns.

Something like (I am not sure how much space you need for your widgets so adjust accordingly, and each combination of the number of columns for the div and the number to push over from the left must always add up to 12 unless you have other divs in the same row)

<dv class="two columns push-nine">Widgets here</div>

However, not only do you need to sort all your multiple stylesheets but your grid CSS is bloated and most of it unecessary so I would recommend having a look around for a pre-styled grid that has much less code in it.

[suavedesign]

SimplyPixie, thanks a lot for your time! I am using a pre-coded template, and I never worked with a grid before, so I would not have figured that out on my own. But, although it did solve the problem of it jumping around on the screen, it now stays in the same place. I wanted that it should always be under the phone number. And the number always stays centered on the page- so when you zoom in or out, the number is in the same place, relative to the rest of the layout of the page. How do I get the widgets to always remain under the number, instead of staying stationary??
Thanks again!!

[simplypixie]

You won't be able to with your current layout as the telephone number is part of your header image and as that is always the same size regardless of the screen size, your widgets will only ever line up underneath the telephone number when the screen is at a certain size. Also, your header, container, columns and rows are a complete mess (sorry to be blunt) with things like your widgets being placed outside the header area and your nav inside, yet it appears below your widgets plus unecessary column divs that are empty and not doing anything.

I am afraid there is far too much work to be done to correct all this layout in my free time so all I can suggest is to learn more about the grid layout, tidy up your html and css and even strip everything out and put each bit back in one at a time so you can see how it all fits together and what is and isn't required.

I would also suggect removing your telephone number from the header image and have it as text in a div floated to the right (as with your widgets) so that they always line up and also ensure your actual header image is within a div that uses a number of columns that actually fits the size of the image.

[suavedesign]

Thanks for your advice.