內容在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

您的設計沒有響應，您僅在使用屏幕大小，但是當該設計顯示在另一個屏幕中時，所有內容將與屏幕上的內容有所不同

您可以按照本指南獲得更好的結果