Html 在不同的屏幕上查看网站时，某些元素会不合适吗？

在我的屏幕上，一切看起来都很好，但当我在楼下的电脑上看的时候，它完全不合适。我用绝对位置定义了位置，然后留下了一定数量的像素。如何使其水平居中，并始终垂直于导航条

我的屏幕：

楼下的屏幕：

.nav main{
宽度：100%；
背景色：#222；
高度：70像素；
颜色：#fff；
不透明度：.65；
}
.nav主标志{
浮动：左；
高度：40px；
填充：15px 30px；
字号：1.4em；
线高：40px；
}
.nav main>ul{
保证金：0；
填充：0；
浮动：左；
列表样式类型：无；
}
.nav main>ul>li{
浮动：左；
}
.导航项目{
显示：内联块；
填充：15px 20px；
高度：40px；
线高：40px；
颜色：#fff；
文字装饰：无；
}
.音乐{
背景色：白色；
背景：rgba（255，255，255，0.6）；
宽度：800px；
最小高度：900px；
位置：绝对位置；
左：524.5px；
右：524.5px；
}
.song-1{
位置：绝对位置；
左：30px；
浮动：左；
}
.song-2{
浮动：对；
位置：绝对位置；
右：30px；
}
.音乐h1{
文本对齐：居中；
}
.音乐h3{
文本对齐：居中；
}

逻辑卢卡斯










我用过的音乐
在这个页面上，你可以找到我在技能汇编中使用的所有音乐

相对定位

.music

，并将

左侧

和

右侧

属性替换为

边距：0自动

.music{
背景色：白色；
背景：rgba（255，255，255，0.6）；
宽度：800px；
最小高度：900px；
位置：相对位置；
保证金：0自动；
}
.song-1{
位置：绝对位置；
左：30px；
浮动：左；
}
.song-2{
浮动：对；
位置：绝对位置；
右：30px；
}
.音乐h1{
文本对齐：居中；
}
.音乐h3{
文本对齐：居中；
}

我用过的音乐
在这个页面上，你可以找到我在技能汇编中使用的所有音乐

您的.music类在屏幕上有固定的边距，请尝试将它们放在%中，以便它们以不同的分辨率缩放。我需要更改左右的百分比？是的，请尝试开始时使用类似：左：30%；右：30%；我已经做了，一个屏幕居中，另一个屏幕左侧相同，右侧不居中，如我的图片所示。非常感谢！很好，我知道。如何将白色框置于导航栏上。现在的图片：@LogicLucas-请在导航栏上发布相关代码。好的。这很容易。我只添加了顶部位置-21px，它与导航栏对齐！非常感谢你的帮助。@Lucas-不客气。添加

margintop

是一种方法，但我一直在跟踪它的来源。