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?