Czy Jest ktoś w stanie mi pomóc w sprawie lekcij kurs html odc.3

W kursie 3 html Ustawiamy ikonki w div-ach używamy opcjij Text-aling: center; w css3

i tu mam problem wszystkie działają oprócz Społecznościowych typu Yt.twiter,Fb i google+ one mi uciekaja kilka px do prawej co prawda jest to nie wielka roznica no ale nie są jakby wycentrowane pisałem słowo w słowo jak na filmie wiele problemów już miałem i jakoś potrafiłem wykryć problem a z tym nie mogę sobie poradzić od dwóch dni normalnie chciałem już olać to i zacząć inny projekt ale stwierdziłem że inaczej się nie naucze niczego jeżeli bede pomijał takie rzeczy poniżej kod

<!DOCTYPE html>
 
<html lang="pl">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="Ie=edge,chrome=1"/>
        <title>Portfolio</title>
        <meta name="description" content="To moja strona na której ucze się kodować html5 i css3"/>
        <meta name="keywords" content="strona,www,tworzenie,kurs,nauka,obrazki">
    <link rel="stylesheet" href="sty.css" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato" rel="stylesheet">
        <link rel="stylesheet" href="css/fontello.css" type="text/css" />
    </head>
    <body>
        
        <div id="container">
           
            <div class="rectangle">
            <div id="logo">Alfred Yako</div>
            <div id="zegar">12:00:00</div>
            <div style="clear: both;"></div>
            </div>
            
             
             <div class="square">
                <div class="tile1"><i class="icon-angellist"></i><br/>Ikona 1</div>
                <div class="tile1"><i class="icon-bicycle"></i><br/>Ikona1</div>
                <div style="clear: both;"></div>
               
            
 
           
            <div class="tile2"><i class="icon-embassy"></i><br/>France</div>
            <div class="tile3"><i class="icon-harbor"></i><br/>Kotwica</div> 
                 
            <div style="clear: both;"></div>   
            
            <div class="tile4"><br/>Wizytówka strony</div>
                 </div>
              <div class="square"></div>
            <div class="tile5">Propozycja tekstu na strone wyświetlany </div>
            <div class="yt"> <i class="icon-youtube"></i></div>   
             <div class="fb"> <i class="icon-airfield"></i></div>  
              <div class="twiter"><i class="icon-gift"></i> </div>  
               <div class="google"><i class="icon-google"></i></div>       
        </div>
          
 <div class="rectangle">2017 &copy </div>
        </div>
            
        </div>
    </body>
</html>

Poniżej css3

body {
    background-color: #303030;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}
#container
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.rectangle
{
    width: 960px;
    margin: 20px;
    text-align: center;
}
.square
{
    width: 50%;
    float: left;
}
#logo
{
    float: left;
    font-family: 'Lato', sans-serif;
    font-size: 70px;
    width: 600px;
    text-align: left;
 
}
#zegar
{
    float: left;
    font-family: 'Lato', sans-serif;
    font-size: 70px;
    text-align: left;
    
 
}
.tile1
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #3095d3;
    float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.tile1:hover{
    background-color: #1073b1 
}
.tile2
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #666666;
    float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.tile2:hover {
    background-color: #555555;
}
.tile3
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #93c748;
    float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.tile3:hover {
    background-color: #82b637;
}
.tile4
{
    margin: 10px;
    width: 480px;
    height: 142px;
    background-color: #ee5a32;
    text-align: center;
    font-size: 28px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
   
    
	
	
}
.tile4:hover {
    background-color: #dd4a21;
}
.tile5{
    margin: 10px;
	width: 420px;
	height: 244px;
	background-color: #666666;
	text-align: center;
	padding: 30px;
    float: left;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    }
.yt
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
   
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    vertical-align: middle;
}
.yt:hover {
    background-color: #b83237;
}
.fb
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.fb:hover {
    background-color: #b83237;
}
.twiter
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.twiter:hover {
    background-color: #b83237;
}
.google
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.google:hover {
    background-color: #82b637;
}
 
 
div {
    display: block;
}

Dodadtkowo dodałem zaokrąglenia na przyciskach co fajnie wyszło i też pytanie jest jakaś możliwość zrobienia ich jedną komendą a nie czterema (4)? w sensie prostą metodą?

border-top-right-radius: 5px

; border-top-left-radius: 5px

; border-bottom-right-radius: 5px

; border-bottom-left-radius: 5px;

prosze o łągodność uczę się od 3 dni