Javascript HTML元素在放大/缩小时移动

我的网站有问题，我的意思是当我放大时，徽标图像和vision图像会移动，甚至包含描述的容器也会移动，日期也会移动到左侧，如下图所示：

我不希望在放大或缩小时元素移动。我希望元素处于相同的位置我怎么能做到

下面是我的HTML代码：

正文
{
背景色：#F6F2F2；
字体系列：Calibri；
背景尺寸：封面；
}
人力资源
{
不透明度：25%；
}
navbar先生{
背景色：#ffffff！重要；
边框颜色：#ffffff；
}
广场
{
高度：100px；
宽度：120px；
背景色：白色；
边框：1px实心#bdbdbd；
右边距：900px；
}
.方形截面
{
高度：100px；
宽度：130px；
背景色：白色；
边框：1px实心#bdbdbd；
左边距：140像素；
边缘顶部：-98px；
}
.square_事件
{
高度：100px；
宽度：120px；
背景色：白色；
边框：1px实心#bdbdbd；
左边距：140像素；
边缘顶部：-98px；
}
.square_adv
{
高度：100px；
宽度：120px；
背景色：白色；
边框：1px实心#bdbdbd；
左边距：280px；
边缘顶部：-98px；
}
.square_用户
{
高度：100px；
宽度：130px；
背景色：白色；
边框：1px实心#bdbdbd；
左边距：290px；
边缘顶部：-98px；
}
.square_vision
{
边框颜色：白色；
高度：100px；
宽度：130px；
背景色：白色；
左边距：-398px；
利润上限：-100px；
}
.vl{
左边框：1px实心#C2C2；
高度：100px；
左边距：25px；
利润上限：-100px；
不透明度：10px；
}
@介质（最小宽度：992px）{
.下拉菜单.下拉切换：之后{
边框顶部：.3em实心透明；
右边框：.3em实心；
边框底部：.3em实心透明；
}
.下拉菜单.下拉菜单{
左边距：0；右边距：0；
方向：rtl；
}
.导航链路
{
利润上限：-22px；
方向：rtl；
}
.下拉菜单li{
位置：相对位置；
方向：rtl；
}
.nav项.子菜单{
显示：无；
位置：绝对位置；
右：100%；顶部：-7px；
}
.nav项。子菜单左{
右：100%；左：自动；
}
.下拉菜单>li:悬停{背景色：#F1F1；
}
.下拉菜单>li:悬停>.子菜单{
显示：块；
方向：rtl；
}
}     
.btn
{
方向：rtl；
左边距：-95px！重要；
右边距：-80px；
边缘底部：-80px；
利润上限：-11px；
宽度：120px；
背景色：白色；
边框颜色：白色；
颜色：黑色；
}
#注销
{
左边距：50像素；
边缘顶部：14px；
}
#部分
{
左边距：44px；
边缘顶部：10px；
}
#mes_注销
{
左边距：20px；
边缘顶部：10px；
}
#欢迎用户
{
左边距：35px；
边缘顶部：14px；
}
#欢迎光临
{
左边距：60像素；
边缘顶部：5px；
}
#视力检查
{
高度：100px；
宽度：130px；
利润上限：3倍；
左边距：25px；
}
#logo_img
{
高度：100px；
宽度：110px；
左边距：-10px；
右边距：10px；
利润上限：-100px；
}
#事件
{
左边距：30px；
边缘顶部：15px；
}
#说明
{
左边距：-150px；
边缘顶部：25px；
高度：180像素；
宽度：860px！重要；
}
#章节img清单
{
左边距：790px；
边缘顶部：10px；
}
#正文部分
{
文本对齐：右对齐；
字体大小：粗体；
利润上限：-30px；
右边距：70像素；
}
#卡尔德鲁
{
左边距：160像素；
边缘顶部：10px；
}
#日期信息
{
左边距：110像素；
利润上限：-20px；
}
.集装箱{
位置：相对位置；
文本对齐：居中；
颜色：黑色；
宽度：100%；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.引用{
显示：无；
文本对齐：居中；
左边距：-150px；
颜色：黑色；
}
.矩形{
高度：190px；
宽度：850px；
背景色：rgb（255、255、255）；
左边距：190px；
边缘顶部：20px；
}
.秒
{
高度：190px；
宽度：850px；
背景色：rgb（255、255、255）；
左边距：190px；
边缘顶部：30px；
}
.页脚{
位置：绝对位置；
左：0；
底部：20%；
宽度：100%；
背景色：#002060；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
边缘底部：-375px；
填充：6px；
}
.日期和时间
{
高度：220px；
宽度：200px；
背景色：rgb（255、255、255）；
左边距：1100px；
利润上限：-600px；
颜色：白色；
字体大小：粗体；
}
.日期
{
高度：60px；
宽度：200px；
背景色：#002060；
}
.电影img{
高度：100px；宽度：100px；背景色：rgb（255、255、255）；
背景重复：无重复；
背景尺寸：封面；
对象匹配：填充；
右边距：35px；
页边顶部：-2px；
边框：1px实心#d6；
不透明度：200%；
盒影：#e2；
}
#质量
{
高度：110px；宽度：110px；背景色：rgb（255，255，255）；
背景重复：无重复；
背景尺寸：封面；
对象匹配：填充；
右边距：20px；
}
#关系
{
高度：110px；宽度：110px；背景色：rgb（255，255，255）；
背景重复：无重复；
背景尺寸：封面；
对象匹配：填充；
右边距：25px；
}
#优质味精
{
右边距：15px；
字体大小：12px；
}
#用户
{
左边距：30px；
边缘顶部：5px；
}
#高级律师
{
左边距：30px；
边缘顶部：10px；
}
.carousel控件上一个图标
{
背景色：#1F419E；
颜色：#1F419E；
转化：translateX（33.333%）；
}
.carousel控件下一个图标
{
背景色：#1F419E；
颜色：#1F419E；
左边距：38px；
}
.movie-img1
{
高度：100px；宽度：100px；背景色：rgb（255、255、255）；
背景重复：无重复；
背景尺寸：封面；
对象匹配：填充；
右边距：155px；
边缘顶部：-99px；
边框：1px实心#d6；
不透明度：200%；
盒影：#e2；
}
莫夫先生