Does my website layout completely shift the top left of the browser screen when I zoom out from my browser?

I know this question is old, but maybe it can help some other people.

Layout sticks to the left

I am assuming that your layout is nested to the left because it is not centered. If you want to center a layout element you have to use the following css code:

.my_element{
  margin: 0 auto;
}

      

        
        
        
      

    

This means that "0 pixels top and bottom and the same number of pixels left and right" (with a horizontal orientation).

But be careful, you cannot use this "trick" if the element has no width:

.my_element{
  margin: 0 auto;
  width: 300px;
}

      

        
        
        
      

    

Here's a demo at jsfiddle. In this example, each element is centered horizontally.

But we can do better. This second demo added envelope containing each element, and we just have to center it.

Layout sticks to the top

If you don't want your layout to stick to the top, you just need to set margin-top on the first div, which is the wrapper in our example:

.wrapper{
  margin-top: 20px;
}

      

        
        
        
      

    

Please note that English is not my first language, if you see some errors please let me know.