html - 在不同屏幕上查看网站时，某些元素不合适？

Question

在我的屏幕上一切看起来都不错，但是当我在楼下的电脑上看时，它就完全错位了。我用position absolute定义了position，然后留下一定数量的像素。我怎样才能使它保持水平居中并始终垂直地靠在导航栏上。

我的屏幕:

屏幕楼下:

.nav-main {
  width: 100%;
  background-color: #222;
  height: 70px;
  color: #fff;
  opacity: .65;
}
.nav-main .logo {
  float: left;
  height: 40px;
  padding: 15px 30px;
  font-size: 1.4em;
  line-height: 40px;
}
.nav-main > ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style-type: none;
}
.nav-main > ul > li {
  float: left;
}
.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
}
.music {
  background-color: white;
  background: rgba(255, 255, 255, 0.6);
  width: 800px;
  min-height: 900px;
  position: absolute;
  left: 524.5px;
  right: 524.5px;
}
.song-1 {
  position: absolute;
  left: 30px;
  float: left;
}
.song-2 {
  float: right;
  position: absolute;
  right: 30px;
}
.music h1 {
  text-align: center;
}
.music h3 {
  text-align: center;
}

<nav class="nav-main">
  <div class="logo">LogicLucas</div>
  <ul>
    <li>
      <a href="about.html" class="nav-item">About</a>
    </li>
    <li>
      <a href="content.html" class="nav-item">Content</a>
    </li>
    <li>
      <a href="music.html" class="nav-item">Music</a>
    </li>
    <li>
      <a href="https://www.youtube.com/channel/UCn63ebEmiYFxhyRVgdCOYtA" class="nav-item">My channel</a>
    </li>
  </ul>
</nav>
<div class="music">
  <h1>Music I used</h1>
  <h3>On this page you can find all the music I used in my skill compilations</h3>
  <div class="song-1">
    <iframe width="350" height="350" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/117698423&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
  </div>
  <div class="song-2">
    <iframe width="350" height="350" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/164076894&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
  </div>
</div>

Answer 1

位置.music相对并替换 left和 right属性 margin: 0 auto .

.music {
  background-color: white;
  background: rgba(255, 255, 255, 0.6);
  width: 800px;
  min-height: 900px;
  position: relative;
  margin: 0 auto;
}
.song-1 {
  position: absolute;
  left: 30px;
  float: left;
}
.song-2 {
  float: right;
  position: absolute;
  right: 30px;
}
.music h1 {
  text-align: center;
}
.music h3 {
  text-align: center;
}

<div class="music">
  <h1>Music I used</h1>
  <h3>On this page you can find all the music I used in my skill compilations</h3>
  <div class="song-1">
    <iframe width="350" height="350" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/117698423&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
  </div>
  <div class="song-2">
    <iframe width="350" height="350" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/164076894&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
  </div>
</div>