Content shifting down in DIVs? - html

Question

I'm working on this project here:
https://codepen.io/WHITE-RABBIT/pen/aMzLWy
I've got pretty much everything in place, but when I use zoom to check that my elements stay in place, I find that all of my content shifts downward. The widths pretty much remain the same, but the headers seem to cause some space and also for the life of me I cannot get my links container to not change size. I know there is probably a fairly simple solution for this, but I have been wracking my brain for hours and I just cannot think of what I did wrong here.
I will split this into sections.
Header:
/**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;
}
The HTML section can be seen on the pen. I'm not going to post it because I am 99% sure that it has nothing to do with my HTML.
I appreciate everyone's time. Hopefully I can find a solution to this soon. Thank you.

Answer 1

Your design isn't responsive, you're working with your screen size only but when the design is displayed in another screen everything will not be the same as it was in your screen
You can follow this guide to get better results