How to zoom in and zoom out properly?

Hi guys! I've made a web page and when I'm zooming in or out that page the text and images are not working accordingly.

I mean when I'm zooming the web page on 100% its working properly, but when I'm changing the zoom to 50%, 70%, or 150%, 180% etc the position of text and images are zooming on different places on the webpage.

How can I fix this?

Please suggest something.

How can I fix this?

 body
{
    font-family: sans-serif;
    background-color: rgb(245, 245, 237); 
}



hgroup
{
    float: left;
    margin-left: 165px;
    margin-top: 30px;
}

nav
{
    float: right;
    margin-right: 185px;
    margin-top: 50px;
}

Please suggest something