Pytanie dotyczącę 3 kursu HTML

Mam problem dotyczacy 3 kursu HTML

W poradniku strona wygląda tak: http://scr.hu/2hfb/dkgsg

Jest tak jakby wycentrowana

U mnie wygląda to tak:http://scr.hu/2hfb/qwrul

Wszystko jest do lewej, zna ktoś może powód?

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<title>Jan Kowalski - Portfolio</title>

<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij mnie jako swojego programiste webowego:PHP, JavaScript,HTML,CSS,"/>
<meta name="keywords" content="zamów,programiste,programowanie,programista, strona,www,tworzenie,php,html,javascript,nowe,"/>
<link rel="stylesheet" href="stajl.css" type="text/css"/>
<link rel="stylesheet" href="css/fontello.css" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 
</head>


<body>
	
	<div id="container">
	
		<div class="rectangle">
			<div id="logo">Jan Kowalski</div>
			<div id="zegar">12:00:00</div>
			<div style="clear:both;"></div>
		</div>	
		
		<div class="square">
			<div class="tile1">
				<a href="kimjestem.html" class="tilelink"><i class="icon-user"></i><br/>Kim jestem?</a>
			</div>
				<a href="oferta.html" class="tilelinkhtml5">
				<div class="tile1">
				<i class="icon-laptop"></i><br/>Co oferuję?
			</div>
			</a>
			<div style="clear:both;"></div>
			
				<div class="tile2"><i class="icon-graduation-cap"></i><br/>Curriculum vitae
			</div>
				<div class="tile3"><i class="icon-mail"></i><br/>Kontakt do mnie
			</div>
			<div style="clear:both;"></div>
			
			<div class="tile4">
			<i>Life is brutal and full of zasadzkas!</i></br>-Pasha Biceps
			</div>
			
		
		</div>
		<div class="square">
			<div class="tile5">
				Tytuł podstrony<br/><br/>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin neque erat, malesuada ut tellus vitae, luctus pellentesque leo. In vel venenatis libero. Aenean sed lacinia nisl, ut fermentum augue. Aliquam vitae viverra quam. Suspendisse luctus mollis nibh sit amet pharetra. Nulla eleifend bibendum elementum. In condimentum arcu elit, in sagittis lectus porttitor non. Aenean lacus turpis, blandit et egestas a, tincidunt nec ligula. Nulla ultrices nisl eu auctor venenatis. Etiam eu nibh elementum, vulputate neque ac, varius diam. 
			</div>
			<div class="yt">
				<i class="icon-youtube"></i>
			</div>
			<div class="fb">
				<i class="icon-facebook"></i>
			</div>
			<div class="gplus">
				<i class="icon-gplus"></i>
			</div>
			<div class="tw">
				<i class="icon-twitter"></i>
			</div>
			<div style="clear:both;"></div>
		
		
		</div>
		<div style="clear:both;"></div>
		<div class="rectangle">2016 &copy; Jan Kowalski - Portfolio. Programista webowy zaprasza do współpracy! <i class="icon-mail-alt"></i> jan.kowalski@adres.com</div>
		
	
	</div>
	
	</body>

</html>

body
{
	background-color:#303030;
	color:#ffffff;
	font-family: 'Lato', sans-serif;
	font-size:20px;
}

#container
{
	width:1000px;
	marigin-left:auto;
	margin-right:auto;
	
}

.rectangle
{
	width:960px;
	margin:20px;
	text-align:center;
}

.square
{
	width:50%;
	float:left;
}

#logo
{
	float:left;
	font-family: 'Josefin Sans', sans-serif;
	font-size:70px;
	width:600px;
	text-align:left;
}

#zegar
{
	float:left;
	font-family: 'Josefin Sans', sans-serif;
	font-size:70px;
	text-align:left;
}


.tile1
{
	width:230px;
	margin:10px;
	height:142px;
	background-color:#3095d3;
	float:left;
	text-align:center;
}

.tile1:hover
{
	background-color:#2084c2;
}

.tile2
{
	width:230px;
	margin:10px;
	height:142px;
	background-color:#666666;
	float:left;
	text-align:center;
}
.tile2:hover
{
	background-color:#2084c2;
}

.tile3
{
	width:230px;
	margin:10px;
	height:142px;
	background-color:#93c748;
	float:left;
	text-align:center;
}
.tile3:hover
{
	background-color:#82b637;
}


.tile4
{
	width:420px;
	margin:10px;
	height:82px;
	background-color:#ee5a32;
	text-align:center;
	font-size:26px;
	padding:30px;
	line-height:150%;
	
}



.tile5
{
	width:420px;
	margin:10px;
	height:244px;
	background-color:#666666;
	text-align:justify;
	padding:30px;
	
}


.yt
{
	width:105px;
	margin:10px;
	height:142px;
	background-color:#d94348;
	float:left;
}
.yt:hover
{
	background-color:#c83237;
}


.fb
{
	width:105px;
	margin:10px;
	height:142px;
	background-color:#4668b3;
	float:left;
}
.fb:hover
{
	background-color:#3557a2;
}


.gplus
{
	width:105px;
	margin:10px;
	height:142px;
	background-color:#d95333;
	float:left;
}

.gplus:hover
{
	background-color:#c84222;
}

.tw
{
	width:105px;
	margin:10px;
	height:142px;
	background-color:#3095d3;
	float:left;
}

.tw:hover
{
	background-color:#2084c2;
}

.icon-user:before
{
	font-size:76px;
	text-align:center;
	margin-top:20px;
	
}
.icon-laptop:before
{
	font-size:76px;
	text-align:center;
	margin-top:20px;
	
	
}
.icon-graduation-cap:before
{
	font-size:76px;
	text-align:center;
	margin-top:20px;
	
	
}
.icon-mail:before
{
	
	font-size:76px;
	text-align:center;
	margin-top:20px;
	
}
.icon-mail-alt:before
{
	
	
	
}
a.tilelink
{
	color:#ffffff;
	text-decoration:none;
	display:block;
	width:230px;
	height:142px;
	
}

a.tilelinkhtml5
{
	color:#ffffff;
	text-decoration:none;
	
	
}