Html / Css Breaks Div When Zooming Out

I am designing a website for my father and so far I'm midway the index page only. What is bugging me that when I zoom out to around 30% (just for tests sake) The divs are broken an

Solution 1:

best practice would be

.bodyoutline
{
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
}

This will make your all elements be in the div and always aligned regardless of zoom-in or zoom-out.

Solution 2:

What I found best people is to use the MEDIA QUERIES

By Simply adding

@media (max-width: 600px)
{
  //All the CSS [classes]to be effected by the change in screen will be written here for e.gh1
{
  font-size:20px;
}
}

When the screen is 600px or smaller (or zoomed out) the font-size of h1 will change to 20px whereas ALL the other CSS will stay as originally written (as it is the parent)

In other words:

Media queries will ONLY affect those classes written between the media queries (will overwrite the original)