内容在DIV中向下移动？

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
{
  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

您的设计没有响应，您仅在使用屏幕大小，但是当该设计显示在另一个屏幕中时，所有内容将与屏幕上的内容有所不同

您可以按照本指南获得更好的结果