内容在Divs中转移

Question

我在这里从事此项目：https://codepen.io/white-rabbit/pen/amzlwy

我已经准备好了很多东西，但是当我使用Zoom检查我的元素是否保持到位时，我发现所有内容都会向下移动。宽度几乎保持不变，但是标头似乎会造成一定的空间，并且在我的寿命中，我无法获得链接容器以无法更改尺寸。我知道这可能有一个相当简单的解决方案，但是我已经在大脑中失去了几个小时，我只是想不出我在这里做错了什么。

我将将其分为部分。

标题：

/**HEADER SECTION**/
.header
{
  width:100%;
  height:5vmin;
  max-height:5vmin;
  left:0vmin;
  top:0vmin;
  margin-top:0vmin;
  position:relative;
  pointer-events:auto;
  z-index:30;
  background-color:RED;
}
.header h1
{
  font-family:Barlow;
  font-size:2vmin;
  color:#9dc7ff;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:0.5vmin;
  margin-top:1vmin;
  position:relative;
  display:inline-block;
  background-color:GREEN;
}
.header u
{
  text-decoration:none;
  font-size:2vmin;
  letter-spacing:0.1vmin;
  font-weight:100;
  font-style:italic;
  font-family:'Black Han Sans', sans-serif;
  color:#ff6ade;
}
.header-links
{
  width:70%;
  height:auto;
  padding-top:0%;
  margin-top:-3.5vmin;
  margin-left:24.2vmin;
  right:0%;
  position:fixed;
  float:right;
  background-color:BLUE;

}
.header-links a
{
  font-family:Roboto;
  font-size:1.02vmin;
  letter-spacing:0.2vmin;
  width:auto;
  height:auto;
  position:relative;
  padding-bottom:2vmin;
  padding-top:0vmin;
  color:WHITE;
  margin-right:2vmin;
  text-decoration:none;
  text-transform:uppercase;
  display:inline;
  border-bottom:0vmin solid RGBA(255,255,255,0.0);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.header-links a:hover
{
  border-bottom:2px solid #2de3ff;
  color:#ff2dce;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.header span
{
display:inline-block;
width: 0.5vmin;
  max-width:0.5vmin;
  max-height:0.5vmin;
height: 0.5vmin;
 top:-0.1vmin;
  margin-right:2vmin;
  position:relative;
background-color:#2de3ff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

sider：

.sider
{
  width:29%;
  height:80vmin;
  position:relative;
  z-index:2;
  margin-top:-7vmin;
  pointer-events:auto;      
  background-color:TRANSPARENT;
}
.sider display
{
  height:40%;
  width:100%;
  top:8vmin;
  position:relative;
  display:inline-block;
  background-image:URL('https://i.imgur.com/KrGRmvE.gif');
  background-size:cover;
  background-position:center;
  -webkit-border-radius: 20px 20px 0px 0px;
border-radius: 10% 10% 10% 10%;
}
.title
{
  height:4vmin;
  width:90%;
  left:1vmin;
  position:relative;
  display:inline-block;
  top:9vmin;
  font-family:Barlow;
  font-size:1.9vmin;
  line-height:1.2vmin;
}
.sider desc
{
  height:auto;
  width:95%;
  left:1vmin;
  top:10vmin;
  position:relative;
  display:inline-block;
  font-family:'Roboto Condensed', sans-serif;
  font-size:1.3vmin;
  font-weight:100;
  line-height:1.5vmin;
  opacity:0.8;
  text-align:justify;
  letter-spacing:0.03vmin;
}
.title icon
{
  height:8vmin;
  width:8vmin;
  max-height:8vmin;
  max-width:8vmin;
  display:inline-block;
  position:relative;
  margin-top:-4vmin;
  margin-right:1vmin;
  left:0vmin;
  float:left;
  background-color:PURPLE;
  background-image:URL('https://i.redd.it/glxbid0p79r11.jpg');
  background-size:cover;
  border:0.5vmin solid BLACK;
  -webkit-border-radius: 50%px;
border-radius: 50%;
}
.buttons-container
{
  height:auto;
  width:100%;
  margin-top:13vmin;
  white-space:nowrap;
  font-family:Roboto;
  line-height:0vmin;
  text-transform:uppercase;
}
.button
{
  height:2.3vmin;
  width:2.3vmin;
  max-height:2.3vmin;
  max-width:2.3vmin;
  margin-right:1vmin;
  display:inline-block;

  background-image:URL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217361/discord-icon-free-download-at-icons8-33230.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.button2
{
  height:2.3vmin;
  width:2.3vmin;
  margin-right:1vmin;
  display:inline-block;

  background-image:URL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217361/kisspng-league-of-legends-computer-icons-riot-games-wall-decals-5b11738fe19235.371578411527870351924.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.buttons-container span
{
  top:-0.8vmin;
  margin-right:1vmin;
  display:inline-block;
  position:relative;
  background-color:GREEN;
  font-size:1vmin;
}

可以在笔上看到HTML部分。我不会发布它，因为我99％确定它与我的HTML无关。

我感谢大家的时间。希望我能尽快找到解决方案。谢谢。

Answer 1

您的设计不响应，您仅处理屏幕尺寸，但是当设计在另一个屏幕中显示时，所有内容都不会与屏幕中的相同

您可以遵循本指南以获得更好的结果