Elements shifting when screen is resized

I’m currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don’t overlap.

However, when the screen is resized the elements shift to the left and start overlapping

I was wondering how to go about fixing this?

Heres my code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./styles.css">
	<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>

</head>
<body>
 <div class="content-wrapper">	
	<header>
		<a href="#" class="logo">[My Coily Story]</a>
		<ul>
			<li><a href="#" class="active">Home</a></li>
			<li><a href="./Scenes/index.html">Scenes</a></li>
			<li><a href="./About/index.html">About</a></li>
			<li><a href="./Contact/index.html">Contact</a></li>
		</ul>
	</header>
</div>

<div class="collage"></div>

<audio id="player" src="1.mp3"></audio>
<div class="player" >
	<div class="control">
		<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
	Kathleen Cleaver - Natural Hair
<div class="bar">
	<div id="progress"></div>
</div>
</div>
	<div id="current">0:00</div>
</div>

<div class="start">
<a href="./Page/index.html">
	<span></span>
	<span></span>
	<span></span>
	<span></span>	
	Start
</a>
</div>
	
</body>
<script type="text/javascript" src="./main.js"></script>
</html>

CSS

@font-face {
    font-family: 'arcade';
    src: url(fonts/ARCADECLASSIC.TTF);
    font-weight: 100;
    font-style: Regular;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    letter-spacing: 1px;
    transition: all 0.35s linear;
}

body {
   background-color: black;
   padding: 0;
   margin: 0;
   height: 100vh;
   width: 100vh;
   display: flex;
   min-height: 100vh;
   align-items: center;
   justify-content: center;
   scroll-behavior: none;
}
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.875rem 6.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Poppins, sans-serif;
    z-index: 10000;
}

header .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.563rem;
    text-transform: uppercase;
    letter-spacing: 0.313rem;
    font-family: Poppins, sans-serif;

}

.logo:hover{
   pointer-events: none;
   border: none;
   box-shadow: none;
   background: transparent;
}

header ul{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Poppins, sans-serif;
    font-size: 1.1rem;
    text-transform: none;

}

header ul li {
    list-style: none;
    margin-left: 1.25rem;
    font-family: Poppins, sans-serif;
    font-size: 1.1rem;
    text-transform: none;

}

header ul li a {
     text-decoration: none;
     padding: 0.375rem 0.938rem;
     color: #fff;
     border-radius: 1.25rem;
     font-family: Poppins, sans-serif;
     font-size: 1.1rem;
     text-transform: none;
     position: sticky;


}

header ul li a:hover,
header ul li a.active {
    background: #fff;
    color: #2b1055;
    font-family: Poppins, sans-serif;
    font-size: 1.1rem;
    text-transform: none;
    position: sticky;
    border: none;
    box-shadow: none;
    transition-delay: 0s;
}

.collage {
    background: url(./Images/1.gif);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 61%;
    width: 55%;
    border: solid 8px;
    border-color: white;
    align-items: center;
    min-width: 55%;
    max-width: 55%;
    justify-content: center;
    top: 20%;
    left: 27%;
    margin-top: -50px;
    margin-left: -50px;

}

.player {
    width: 55%;
    background-color: black;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    color: white;
    grid-gap: 16px;
    position: relative;
    border-radius: 50px;
    height: 60px;
    position: relative;
    top: 33%;
    left: 65%;
    align-items: center;
    justify-content: center;
    margin-top: -50px;
    margin-left: -50px;
}    

.control, #current {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 16px;
}

#playbtn {
    font-size: 24px;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    cursor: pointer;
}

#playbtn:hover {
    -webkit-text-fill-color: white;
}

.info {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
    white-space: nowrap;
    

    

}

#current {
    text-align: right;
}

.bar {
    --space:  -4px;
    background-color: #24242424;
    overflow: hidden;
    left: var(--space);
    right: var(--space);
    top: var(--space);
    bottom: var(--space);
    position: absolute;
    border-radius: 64px;
    z-index: -2;
}

#progress {
    display: block;
    width: var(--progress, 0%);
    background-color: white;
    transition: all 1s linear;
    height: 100%;
}

a {
    z-index: 10000;
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #d4337e;
    font-family: arcade;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 60px;
    overflow: hidden;
    transition: 0.2s;
    position: relative;

}

.start {
    position: relative;
    top: 42%;
    left: 31%;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 55%;
    margin-top: -50px;
    margin-left: -50px;
  

}
a:hover {
    color: #ffffff;
    background: #d4337e;
    box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
    transition-delay: 1s;
}

a span {
    position: absolute;
    display: block;
}

a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#d4337e);
}

a:hover span:nth-child(1) {
    left: 100%;
    transition: 1s;
}

a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#d4337e);
}

a:hover span:nth-child(3) {
    right: 100%;
    transition: 1s; 
    transition-delay: 0.5s;
} 

a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#d4337e);
}

a:hover span:nth-child(2) {
    top: 100%;
    transition: 1s; 
    transition-delay: 0.25s;
}   

a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#d4337e);
}

a:hover span:nth-child(4) {
    bottom: 100%;
    transition: 1s; 
    transition-delay: 0.75s;
}                       

JS

var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");

var playpause = function () {
	if (player.paused) {
		player.play();
	} else {
		player.pause();
	}
}

playbtn.addEventListener("click", playpause);

player.onplay = function () {
	playbtn.classList.remove("fa-play");
	playbtn.classList.add("fa-pause");
}

player.onpause = function () {
	playbtn.classList.add("fa-play");
	playbtn.classList.remove("fa-pause");
}	

player.ontimeupdate = function () {
	let ct = player.currentTime;
	current.innerHTML = timeFormat(ct);
	///progress
	let duration = player.duration;
	prog = Math.floor((ct * 100) / duration);
	progress.style.setProperty("--progress",prog + "%");
}

function timeFormat(ct) {
	minutes = Math.floor(ct / 60);
	seconds = Math.floor(ct % 60);

	if (seconds < 10) {
		seconds = "0"+seconds;
	}

	return minutes + ":" + seconds;
}

Any help is appreciated.

Your content wrapper is closed right after the header, which you probably didn’t intend. So check the rest of your code if all opening tags have matching closing tags. Probably unmatched tags are causing the trouble.