Ciao a tutti ragazzi, approfitto per fare il mio primo saluto alla community.

Ho da poco iniziato a giocare con html5 e css3, sto realizzando un piccolo sito.
Il problema che incontro è nel caso specifico con la socialbar, l'ho creata con un ul ma non riesco a centrarla. Inoltre ho un problema con la transazione di un elemento, in particolare non riesco a far si che la transazione in uscita dell'hover di #ig sia fluida.

Vi lascio il codice e il css così magari riuscite a dirmi dove sbaglio,

Grazie mille

<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="socialbar">
<ul>
<li><a href="https://www.facebook.com" id="fb"><span class="socicon-facebook"></span></a></li>
<li><a href="https://www.youtube.com" id="yt"><span class="socicon-youtube"></span></a></li>
<li><a href="https://www." id="ig"><span class="socicon-instagram"></span></a></li>
<li><a href="https://www." id="ml"><span class="socicon-mail"></span></a></li>
</ul>
</div>
</body>
</html>



#socialbar ul li{
float:left;
text-align:center;
margin:0 auto;
font-size:150%;
list-style:none;
padding:20px;
}
#socialbar ul li a{
display: inline-block;
color:#5d6061;
padding:auto;
text-decoration:none;
transition:all ease-out 0.5s;
}
#socialbar ul li a:hover{
font-size:200%;
padding: 1px 1px;
}
#fb:hover{
color: #3e5b98;
}
#yt:hover{
color: #e02a20
}
#ig:hover{
background: -webkit-linear-gradient(#4c68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#ml:hover{
color: #00bf8f
}