我正在这里从事这个项目： 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无关。
我感谢每个人的时间。希望我能尽快找到解决方案。谢谢。