Przesunięcie bloku po dodaniu fontello.

pytanie zadane 25 marca 2018 w HTML i CSS przez Kinga Zalewska Nowicjusz (120 p.)

Witam, piszę na forum pierwszy raz i dopiero uczę się programowania.

Przerabiam kurs Pana Mirosława ("Kurs HTML odc. 3: Linkowanie podstron, przyjazne adresy, fontello") już drugi raz. Tym razem, kod próbuje pisać sama. Przy dodawaniu czcionek fontello napotkałam na problem. Mianowicie, blok tile4 po dodaniu czcionki przesunął mi się w dół.

Może ktoś zauważy jakiś błąd lub błędy, które przeoczyłam.

Dla rozjaśnienia sprawy, teraz wygląda to tak.

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

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	
	<meta name="description" content="Portfolio developera. Kinga" />
	<meta name="keywords" content="programista, developer, html, css" />
	
	<title>Programista Kinga</title>
	
	<link href="moje.css" type="text/css" rel="stylesheet"/>
	<link href="css/fontello.css" type="text/css" rel="stylesheet"/>
	<link href="css/fontello.css" type="text/css" rel="stylesheet"/>
	<script src="timer.js"></script>
	
	
</head>

<body onload="odliczanie();">

	<div id="container">
	
		<div class="headline">
		
			<div id="logo">Kinga
			</div>
			
			<div id="zegar">
			</div>
		</div>
		
		<div class="square">
			<div class="tile1" >
					<i class="icon-emo-thumbsup"><br/><br/></i>
				Kim jestem?</div>
			<div class="tile2">
				<i class="icon-emo-devil"><br/><br/>
			Co oferuję?</div>
			<div class="tile3">
				<i class="icon-emo-coffee"><br/><br/>
			Curriculum vitae</div>
			<div class="tile4">Kontakt ze mną</div>
			<div class="tile5">Takl is cheap. Show me the code. - Linus Torwals, twórca Linuxa</div>
		</div>
		
		<div class="square1">
			<div class="tile6">Tile6</div>
			<div class="yt">Tile7</div>
			<div class="fb">Tile8</div>
			<div class="in">Tile9</div>
		</div>
		
		<div class="footer">Copyright &copy 2018 Kinga Zalewska 
		</div>
		
	</div>


</body>

</html>

body
{
	background-color: #ffffff;
	color: #ffffff;
	font-family: "georgia", serif;
	font-size: 20px; 
}

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

.headline
{
	width: 900px; 
	height: 100px;
	background-color: #FFC0CB;
	color: white;
	margin-top: 30px;
}

#logo
{
	width: 450px;
	height: 100px; 
	text-align: left;
	line-height: 100px;
	white-space: nowrap;
	font-size: 55px;
	color: white;
	float: left;
}

#zegar
{
	width: 450px;
	height: 100px; 
	float: left;
	font-size: 60px; 
	text-align: center; 
}
#zegar::before
{
	height: 100%;
	width: 110px; 
	vertical-align: middle;
	content: ' '; 
	display: inline-block; 
}


.square
{
	float: left;
	width: 445px; 
	height: 425px; 
	background-color: #ffffff;
	margin-top: 10px; 
}

.tile1
{
	width: 217px;
	height: 135px;
	background-color: #FFC0CB;
	float: left;
}

.tile2
{
	width: 217px;
	height: 135px; 
	background-color: #FFC0CB;
	float: left;
	margin-left: 10px; 
}

.tile3
{
	width: 217px;
	height: 135px;
	background-color: #FFC0CB;
	float: left;
	margin-top: 10px;
}

.tile4
{
	width: 217px;
	height: 135px; 
	background-color: #FFC0CB;
	margin-left: 10px; 
	margin-top: 10px; 
	float: left; 
	
}

.tile5
{
	clear: both;
	width: 445px; 
	height: 132px; 
	background-color: #FFC0CB;
	position: absolute;
	margin-top: 293px;
}

.square1
{
	float: left;
	width: 445px; 
	height: 425px;
	background-color: #ffffff;
	margin-top: 10px;
	margin-left: 10px; 
}

.tile6
{
	width: 445px; 
	height: 280px;
	background-color: #FFC0CB; 
}

.yt
{
	float: left; 
	height: 132px;
	width: 142px; 
	background-color: #FFC0CB; 
	margin-top: 13px; 	
}

.fb
{
	float: left; 
	height: 132px;
	width: 141px; 
	background-color: #FFC0CB; 
	margin-top: 13px; 
	margin-left: 10px; 
}

.in
{
	float: left; 
	height: 132px;
	width: 142px; 
	background-color: #FFC0CB; 
	margin-top: 13px; 
	margin-left: 10px; 
}	

.footer
{
	clear: both;
	background-color: #FFC0CB;
	width: 900px; 
	height: 40px;
	position:absolute;
	top: 575px;
	font-size: 15px;
	text-align: center;
}

.footer::before
{
	height: 100%;
	width: 0; 
	vertical-align: middle;
	content: ' '; 
	display: inline-block; 
}