HTML Wyśrodkowanie

pytanie zadane 26 października 2016 w HTML i CSS przez Pinecha Nowicjusz (200 p.)
edycja 26 października 2016 przez ScriptyChris

Witam, chce stworzyć identyczny projekt jak w odcinku 3 z nauki HTML. Już tam troszeczkę popisałem, stworzyłem sobie przykładowe kafelki, lecz mam problem z wyśrodkowaniem wszystkiego.

Prosił bym o wyszukanie tekstu i wytłumaczenie mi gdzie popełniłem błąd. Dziękuję!


<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Pinecha - Portfolio</title>
	
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego: PHP, JavaScript, HTML, CSS, MySQL, WordPress, Joomla, Drupal." />
	<meta name="keywords" content="zamów, stronę, tworzenie, www, programista, portfolio, php, javascript, html, css, WordPress, Joomla, Drupal" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet" type="text/css">
</head>

<body>

	<div id="container"></div>
		
		<div class="rectangle">
			<div id="logo"> <left><h1>Bartosz "Pinecha"</h1></left></div>
			<div id="zegar"> <h1>12:00:00</h1></div>
			<div style="clear:both;"></div>
		</div>
		
		<div class="square">
			<div class="title1">1</div>
			<div class="title1">1</div>
			<div style="clear:both;"></div>
			
			<div class="title2">2</div>
			<div class="title3">3</div>
			<div style="clear:both;"></div>
			
			<div class="title4">4</div>	
		</div>
		
		<div class="square">
		<div class="title5">5</div>
		
		
		
		</div>
		
		
		
		<div style="clear:both;"></div>
		
		<div class="rectangle"></div>
		
	</div>


</body>

CSS:

body
{
    background-color: #696969;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
 
}
 
#container
{
    width:1000px;
    margin-left: auto;
    margin-right: auto;
     
}
 
.retangle
{
    width: 960px;
    margin: 20px;
     
}
 
.square
{
    width: 50%;
    float: left;
}
 
#logo
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70 px;
    width: 600px;
}
 
#zegar
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70 px;
}
 
.title1
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #9ACD32;
    float: left;
}
.title2
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #1E90FF;
    float: left;
}
 
.title3
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #FFD700;
    float: left;
}
.title4
{
    margin: 10px;
    width: 480px;
    height: 142px;
    background-color: #B22222;
}
.title5
{
    margin: 10px;
    width: 480px;
    height: 304px;
    background-color: #666666;
}

// Dodałem kod CSS, który autor pokazał komentarzu