Czemu div-y błędnie mi się renderują?

mam problem

<!DOCTYPE html>
<html lang="pl"> 

<head>
	<meta charset="utf-8"/>
	<title>Arg-F</title>
	<meta name="description" content="Dyskutój z ludźmi na każdy temat! Serwer do rozmów."/>
	<meta name="keywords" content="Dyskusja, kłótnia, kłótnia wi internecie, rozmowa, czat, gadugadu, messenger, walka, rozmowa z losowymi ludźmi, dyskusja z obcymi, rozmowa z nieznajomym" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<meta name="author" content="Olaf Lewandowski"/>
	<link rel="shortcut icon" href="LogoGora.png">
	<link rel="stylesheet" href="style.css" type="text/css"/>
	
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
	
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">
	
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
	
</head>

<body bgcolor= "#2C9A9A">

	<div id="container"> 
	
		<div id="logo" bgcolor="black">
				
			<h1><center><img src="IMG.png"></center></h1> <! – Logo witryny –>

			<a title= "Znajdź rozmówcę."><h1><center> <! – Link do szybkiej rozmowy na żywo –>
			PIERWSZY NA ŚWIECIE CZAT Z ARBITRAŻEM
			</center></h1></a>
			
		</div>
	
		<div id="frame">
	
				<div id="nav">
					<div class="option">
					
						<br>
						<a><center>CZAT PUBLICZNY</center></a>
						<br>
					
					</div>
					
					<br>
					<br>
					
					<div class="option">
					
						<br>
						<a><center>CZAT ZAMKNIĘTY</center></a>
						<br>
					
					</div>
					
					<br>
					<br>
					
					<div class="option">
						
						<br>
						<a><center>ZNAJOMI</center></a>
						<br>
					
					</div>
					
					<br>
					<br>
					
					<div class="option">
						
						<br>
						<a><center>USTAWIENIA</center></a>
						<br>
					
					</div>
					
					<br>
					<br>
				</div>
				
				<div id="line">
					
				</div>
				
				<div id="content">
				
				</div>
				
				<div id="clockFrame">
				 
					<center><div id="clock">
						<b>12:00:00</b>
					</div></center>
				</div>
				
				<div id="writeSpace">
				
				</div>
				<div style="clear: both;"></div>
		
				<div id="footer">
					<center><h4><b><center>Kontakt i media:</center></b></h4></center>
					
					<div class="media" style="background-color: red; ">
						yt
					</div>
					<div class="media" style="background-color: lightblue;">
						insta
					</div>
					<div class="media" style="background-color: darkcyan;">
						twiter
					</div>
					<div class="media" style="background-color: darkblue;">
						steam
					</div>
						
				</div>
		
		</div>
		
	</div> 
	
</body>

</html>

body
/*tekst */
{
	font-family:  Arial;
}
h1 
{
	font-family: Syne Mono;
	font-size: 50px;
}
h2, h3, h4
{
	font-family: Syne Mono;
}

a:link
{
	color: darkgrey;
	text-decoration: none;
}
a:visited
{
	color: darkgrey;
	text-decoration: none;
}
a:hover
{
	color: #BB0000;
	text-decoration: none;
}

/* div-y */

		#container
		{
			background-color: #2C9A9A;
			width: 1000px;
			
			margin-left: auto;
			margin-right: auto; 
		}
		#frame
		{
			background-color: black;
			width: 1000px;
			padding: 4px;
		}
		#logo
		{
			background-color: #2C9A9A;
			color: lightblue;
		}
		#nav
		{
			float: left;
			background-color:  #4D698D;
			color: black;
			width: 160px;
			min-height: 620px;
			padding: 10px;
		}
		#line
		{
			width: 4px;
			min-height: 620px;
			float: left;
			background-color: black;
			color: black;
		}
		#content
		{
			width: 796px;
			min-height: 620px;
			float: left;
			background-color: white;
			color: black;
			padding: 10px;
			position: relative;
			font-family: Amiri;
		}
		#clockFrame
		{
			width: 180px;
			clear: both;
			min-height: 40px;
			background-color: black;
			float: left;
			background-color:  #4D698D;
			margin-left:auto;
			margin-right:auto;

		}
		#clock
		{
			width: 140px;
			clear: both;
			color:white;
			min-height: 20px;
			background-color: black;
			clear: both;
			font-family: 'Major Mono Display', monospace;

		}
		#writeSpace
		{
			width: 816px;
			min-height: 40px;
			background-color: lightgrey;
			color: black;
			font-family: Amiri;
			float: right;
		}
		#footer
		{
			width: 1000px;
			background-color: black;
			color: white;
		}
		#media
		{
			max-width: 120px;
			max-height: 194px;
			margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 10px;
			margin-top: 10px;
			float: left;
		}
		
.option
{
	font-family: Syne Mono;
	font-size: 18px;
	min-height: 99px;
	width: 160px;
	background-color:  #4E788E;
	font-stretch:20px;
	
		a:link
	{
		text-decoration: none;
		color: darkgrey;	
	}
	a:link
	{
		text-decoration: none;
		color: darkgrey;	
	}
	a:visited
	{
		color: darkgrey;
		text-decoration: none;
	}
	a:hover
	{
		color: #BB0000;
		text-decoration: none;
	}
}

czemu w div-ie footer w klasie media bloki mi się renderują tak jak footer a nie jako osobne bloki w?

co zapisałem źle

		#footer
		{
			width: 1000px;
			background-color: black;
			color: white;
		}
		#media
		{
			max-width: 120px;
			max-height: 194px;
			margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 10px;
			margin-top: 10px;
			float: left;
		}

				<div id="footer">
					<center><h4><b><center>Kontakt i media:</center></b></h4></center>
					
					<div class="media" style="background-color: red; ">
						yt
					</div>
					<div class="media" style="background-color: lightblue;">
						insta
					</div>
					<div class="media" style="background-color: darkcyan;">
						twiter
					</div>
					<div class="media" style="background-color: darkblue;">
						steam
					</div>

czemu te div-y wyglądają jak footer?