html+css界面缩放导致的页面混乱最优解

今天写页面遇到一个缩放布局失效问题，没当回事，刚才写页面又出现这个问题，今天必须解决冲！！！

首先，这是我完成的的简单导航栏界面：

当我缩放后，问题出现了：

看了超多大神的解释，但是好复杂，所以就采取了最简单的一种方法：设置版心
版心：版心就是页面最主要部分，简单来说就是从上往下一竖列，看界面板块主要集中位置，从头到尾就是版心。

问题解决方法： 就是在页面开始前在css最前列设置一个固定的宽度，如：

.w{
      width:1200px;
      margin:0 auto;//如果有版心位于中间位置的，可以设置margin
    }

<div class="header clearfix w"> //在父元素中提及，以防忘记设置版心，最好在放在css首行。
</div> 

解决后如图：
可以自由缩放啦，这个方法有没有弊端还没发现，踩过坑的帮忙解答一下啊，求求大佬了。