Html 定位元件有问题。使用CSS

我尝试学习HTMl和CSS已经有一段时间了，我已经知道了一些基础知识，但很长一段时间以来我一直在努力将项目定位在我想要的位置

我已经学习了很多教程，如果我完全按照他们的方法去做，一切都会很完美，但是当我开始处理周围的事情，让它变得更复杂时，事情并不像我期望的那样

例如，查看此图像。我有行元素，第一个我能够覆盖50%的屏幕上的每一个项目，并在中间与浮动对齐他们，但当我改变宽度为40%而不是50%，他们松散的中心对齐，对我来说更奇怪的是，他们下降了几个像素，松散与项目贝娄分离。 我不明白为什么改变宽度会影响它的垂直位置

第二行的元素，IM将它们定位为绝对值，我不知道如何将它们放在屏幕中间。

在第四行，米色和绿色框中，我不明白为什么米色框中的文本位于框的底部，部分位于框外，而所有其他行中的文本自动垂直于框的中心对齐

这是我的密码：

正文{
保证金：自动；
最大宽度：4000px；
高度：5000px；
字体系列：“Lato”；
}
#文本-1{
背景色：黑色；
颜色：白色；
宽度：50%；
填充：20px，50px；
浮动：左；
文本对齐：居中；
文本对齐：自动；
}
#text-1：悬停{
背景色：白色；
颜色：黑色；
}
#文本-2{
背景颜色：浅灰色；
颜色：黑色；
宽度：50%；
填充：20px，50px；
浮动：左；
文本对齐：居中；
文本对齐：自动；
}
#文本2：悬停{
背景色：白色；
颜色：黑色；
}
#文本-3{
背景色：黑色；
颜色：白色；
宽度：500px；
填充：0px，50px；
位置：绝对位置；
左：200px；
顶部：100px；
文本对齐：居中；
}
#text-3：悬停{
背景色：白色；
颜色：黑色；
}
#文本-4{
背景颜色：浅灰色；
颜色：黑色；
宽度：500px；
填充：0px，50px；
位置：绝对位置；
左：700px；
顶部：100px；
文本对齐：居中；
}
#text-4：悬停{
背景色：白色；
颜色：黑色；
}
#文本-5{
背景颜色：浅粉色；
颜色：黑色；
宽度：100%；
填充：0px，50px；
位置：固定；
顶部：200px；
文本对齐：居中；
}
#文本-5：悬停{
背景色：白色；
颜色：黑色；
}
a:链接{
文字装饰：无；
颜色：继承；
}
a:参观了{
文字装饰：无；
颜色：继承；
}
.框-1{
背景颜色：米色；
颜色：黑色；
宽度：500px；
高度：100px；
位置：相对位置；
左：100px；
顶部：300px；
文本对齐：居中；
边框样式：实心；
边框宽度：1px；
左侧填充：20px；
右边填充：20px；
z指数：1；
}
.方框-2{
背景颜色：浅绿色；
颜色：黑色；
宽度：200px；
高度：100px；
位置：相对位置；
左：300px；
顶部：250px；
填充：20px，20px，20px，20px；
文本对齐：居中；
边框样式：实心；
边框宽度：1px；
z指数：0；
}

此框通过使用高于下面框的z索引在其他框前面进行分区

你想要这样吗

正文{
保证金：自动；
最大宽度：4000px；
高度：5000px；
字体系列：“Lato”；
}
#文本-1{
背景色：黑色；
颜色：白色；
宽度：50%；
填充：20px，50px；
浮动：左；
文本对齐：居中；
文本对齐：自动；
位置：相对位置；
}
#text-1：悬停{
背景色：白色；
颜色：黑色；
}
#文本-2{
背景颜色：浅灰色；
颜色：黑色；
宽度：50%；
填充：20px，50px；
浮动：左；
文本对齐：居中；
文本对齐：自动；
位置：相对位置；
}
#文本2：悬停{
背景公司