Container Div Issue

Hi,

I have a container div which is intended to wrap the entire content. However, it seems to only wrap the header section. I’m quite sure the tags are complete but I’m lost as to why it’s not working. Appreciate your help.

HTML code

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Albums</title>
		<link href="styles.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<div id="container"> <!--content wrapper-->
			<div class="header up"><h1>ANALOGUE DREAMS</h1></div> <!--Header logo-->
			<div class="btntop"> <!--header nav buttons-->
					  <a href="#">Albums</a> 
					  <a href="#"> Reviews</a> 
					  <a href="#"> Cart</a> 
					  <a href="#"> Payment</a> 
			</div>
			<hr> <!--horizontal purple line-->
			<!--albums cover art-->
			<div class="cover"><img src="images/mixtape.jpg" width="400" height="400" alt="mixtape"/></div>
			<div class="cover"><img src="images/synth-city.jpg" width="400" height="400" alt="Synth City"/></div>
			<div class="cover"><img src="images/virtual-cafe.jpg" width="400" height="400" alt="Virtual Cafe"/></div>
			<!-- tracklists of albums-->
			<div class="tracklist">
				<ol>
					<li>Intro</li>
					<li>Satellite Gazing</li>
					<li>Mark My Whisper</li>
					<li>Run for the City</li>
				</ol>
			</div>	

			<div class="tracklist">
				<ol>
					<li>Fly-thru</li>
					<li>Vapor Inc.</li>
					<li>Statue of Serenity</li>
					<li>Run for the City</li>
					<li>Dream Mall</li>
					<li>Hazy Vibes</li>
					<li>Above and Beyond</li>
				</ol>
			</div>
			<div class="tracklist">
				<ol>
					<li>Vaoper Shake</li>
					<li>Virtual Cafe</li>
					<li>Synth Alamode</li>
					<li>Bake the Wave</li>
					<li>Gliccino</li>
					<li>Choices</li>
					<li>Split the Bill</li>
					<li>80's Brew</li>
				</ol>
			</div>
			
			<div class="spacer"></div> <!--add empty space-->
			<!--footer section-->
			<footer>
				<div class="footer-content"> <!--main section of footer-->
					<p>Design by: </p> <!--designer tag-->
				</div>
				<div class="footer-bottom"> <!--bottom of footer with copyright and dummy links-->
					<p>copyright &copy;2020 Analogue Dreams
					<br>
					<br>
					Contact | Support | Mailing List <!--dummy links-->
					</p>
				</div>
			</footer>

		</div>
	</body>
</html>

CSS

@charset "utf-8";
/*body{background: #1B1B19;} /*body colour black-ish*/

#container{
    margin: 0% 1% 0% 1%;
}
.btnmid{margin-top: -45px;text-align: center;font-size: 0px;margin-right: 442px;font-size: 28px;} 
/*home page buttons */
.btntop{margin-top: -41px;font-size: 20px;margin-left: 18px;}
h1 {color: #09CFBF;} /*main header artist name*/
.up{margin-left: 12px;font-size: 25px;margin-top: -30px;} /*title on the rest of the pages*/
.latest-album {margin-right: -250px;margin-left: 35px;float: left;margin-top: -85px;font-family: 'arapey', serif} /*main photo on home page*/
a:link {text-decoration: none;} /*no underlined links*/
a:visited {color: #FFFFFF;} /*visited link colored white*/
a:hover {color: #A263FC;} /*hovered link colored purple*/
a {font-style: normal;font-weight: bold;font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;padding-right: 15px;color: #FFFFFF;} /*link properties*/
a:active {color: #FFFFFF;} /*active link white*/
hr {margin-top: 10px;border-top: 1px solid #4204DB;border-bottom-color: #4204DB;border-right-color: #4204DB;border-left-color: #4204DB;} /*horizontal line at the top*/
.cover{float:left; margin:3%;padding:2.44%} /*album cover images styling*/
.tracklist{float: left;margin-right: 12.4%;padding-left: 7%;margin-top: -5%;color: #6887FF;font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;font-size: 24px;} /*track lists styling*/

.spacer{  margin-bottom:44%;}
footer {
    background-color: #272727;
    width: 97.33%;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    position: absolute;
    bottom: 1;
}
.footer-content{display:flex; align-items:center;justify-content:center;flex-direction:column;}
.footer-content p{max-width:500px; margin: 10px auto; line-height:28px; font-size:14px;}
.footer-bottom{width:100%;padding:20px 0; text-align:center;}

Hi @mikkoztail,
I can see in your CSS, you used float: left; for 2 classes: .cover and .tracklist.
One tricky thing about using float on elements is that it affects the element that contains them (their parent element, in your case is the #container div).
You can read more about this here:

Also, you use position: absolute; on footer, which take it out of the normal flow.

On a side note, you should reformat the CSS code for more readability. Some thing like this:

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

And using percentage for margin and padding is not a good idea. You should use em or px.
Hope that helps. Happy coding!