Witam! Postanowiłem zrobić układ strony za pomocą divów, lecz zamiast czegoś takiego 
Otrzymuje takie coś 
Kod HTML
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Moje TOP 8 gier! </title>
<meta name="description" content="Moje TOP 8 gier!"/>
<meta name="keywords" content="gry, komputer, top"/>
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="styledotop.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="logo">
<h1> Najlepsze gry - subiektywne TOP8! </h1>
</div>
<div id="nav">
Europa Universalis 4<br />
Zeus Pan Olimpu<br />
Mafia 2<br />
Terraria<br />
Wiedźmin 3<br />
TES Skyrim<br />
Fallout 4<br/>
The Talos Principle<br/>
</div>
<div id="content">
<h2> Europa Universalis IV</h2>
Wzorem wcześniejszych odsłon cyklu, w Europa Universalis IV gracz wciela się w rolę szarej eminencji, która kieruje rozwojem wybranego kraju na przestrzeni wieków. Tym razem do wyboru jest ponad 250 nacji zamieszkujących praktycznie cały glob. Zależnie od scenariusza długość historycznego okresu gry może wynosić nawet blisko 400 lat (w kampanii głównej). Zadanie jest o tyle skomplikowane, że w rękach gracza znajduje się całe spektrum spraw związanych z rządzeniem – począwszy od ustroju, poprzez politykę zagraniczną, handel, gospodarkę i strukturę społeczną, a na badaniach naukowych, wojskowości, działaniach militarnych, eksploracji świata i kolonizacji nowych terytoriów skończywszy.
<br></br>
Twórcy gry postarali się o solidne fundamenty historyczne. W EU IV pojawia się 4 tys. nazwisk przywódców państw i cała plejada innych postaci znanych z kart podręczników do historii. Zadbano również o zaakcentowanie najważniejszych wydarzeń w dziejach, które nierzadko mają wpływ na rozgrywkę
</div>
<div id="ad">
<img src="img/reklama.jpg" />
</div>
<div id="footer">
Najlepsze gry - TOP8 &;copy Wszelkie prawa zastrzeżone
</div>
</div>
</body>
</html>
Kod CSS
body
{
background-color:lightslategrey ;
font-family: Verdana;
font-size:20px;
color:white;
}
h1
{
font-size: 30px;
}
/*Nieodzwiedzony link*/
a:link
{
color: yellow;
}
/*Odwiedzony link*/
a:visited
{
color: yellow;
}
/*Link po najechaniu kursorem*/
a:hover
{
color:red;
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
background-color: black;
text-align: center;
padding: 15px;
}
#ad
{
min-height: 360px;
width: 160px;
float: left;
background-color: lightgrey;
}
#nav
{
background-color:lightgrey;
width: 160px;
min-height: 620px;
padding: 10px;
float: left;
}
#content
{
padding: 20px;
width: 570;
float: left;
text-align: center;
background-color:blue;
}
#footer
{
background-color:black;
color:white;
text-align:center;
padding:20px;
clear:both;
}
Prosiłbym o wskazanie błędu w kodzie. Z góry dziękuję.
