Flexbox Overlapping elements

I have a container with 3 elements; an image, an audio player and a button. I want these elements to be arranged in a column that is centred on the page so I’ve applied a display: flex; with the flex-direction set to column to the container. I thought this would do the job but I’m currently stuck with this.

The audio and button elements are on top of the image as opposed to below it in a column layout. The elements are also positioned on the left side of the page as opposed to the center. I’m really stuck on how to go about fixing this. I’d really appreciate it if anyone could go through my code and point me in the right direction.

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="container">
	
    <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>
  </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;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 
   

}

.collage {
    background: url(./Images/1.gif);
    background-size: 100%;
    position: absolute;
    width: 55%;
    height: 61%;
    max-width: 55%;
    background-repeat: no-repeat;
    border: solid 8px;
    border-color: white;
    margin: auto;

 
   


}

.player {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    color: white;
    grid-gap: 16px;
    position: relative;
    border-radius: 50px;
    height: 60px;
    margin: auto;
   
    
   
}    

.start {
    margin: auto;
  
    
}
.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;

  

}
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;
}           

Any suggestions are appreciated.