Html 网站布局因缩放而变得混乱

我在放大和缩小网站时遇到了问题。缩放时布局变得混乱

标题中的项目不会保持居中，而是在缩小时向左移动，或在放大时向右移动

另外，我有一个图像背景（CSS），放大时它不会居中。我能在这个问题上得到一些帮助吗。谢谢

以下是HTML和CSS代码：

body，
html{
身高：100%；
边际：0px；
填充：0px；
}
#包装纸{
保证金：0自动；
}
#标题包装{
背景：#ebebeb；
宽度：100%；
高度：50px；
位置：固定；
z指数：10；
盒子阴影：0px 0px 10px 6px rgba（0,0,0,0.65）；
-moz盒阴影：0px 0px 10px 6px rgba（0,0,0,0.65）；
-webkit盒阴影：0px 0px 10px 6px rgba（0,0,0,0.65）；
}
#标题{
宽度：80%；
高度：50px；
保证金：0自动；
底部：20px；
位置：相对位置；
}
#标志{
宽度：128px；
高度：50px；
背景图片：url（“pictures/logo2.png”）；
左边距：250像素；
浮动：左；
背景重复：无重复；
位置：相对位置；
顶部：28px；
}
#导航包装器{
宽度：650px；
高度：50px；
右边距：340px；
位置：相对位置；
顶部：35px；
}
#导航{
字体系列：“Roboto Condensed”，无衬线；
}
#李海军{
列表样式类型：无；
显示：内联；
填充：10px；
字体大小：15px；
}
#家{
宽度：100%；
高度：810px；
背景图片：url（“图片/banner3-2.png”）；
背景尺寸：封面；
位置：固定；
顶部：50px；
}
#关于{
宽度：100%；
高度：820px；
背景：#ebebeb；
位置：相对位置；
顶部：860px；
}
#洛勒姆{
宽度：100%；
高度：820px；
背景：#46717f；
位置：相对位置；
顶部：860px；
}
#接触{
宽度：100%；
高度：200px；
背景：黑色；
位置：相对位置；
顶部：860px；
}
#标题包装器a{
颜色：黑色；
}
#标题包装器a:链接{
颜色：黑色；
文字装饰：无；
}
#标题包装器a：悬停{
颜色：#46717f；
}
#标题包装器a:活动{
颜色：白色；
文字装饰：无；
}

我将您的代码转换成了一个片段，这样用户就可以看到实时预览，并删除了本地链接，因为它们是不必要的。如果出了什么问题，请纠正我。它仍然不起作用。我尝试了很多方法，但仍然没有结果。