a #socialbar ul li togli il float:left e metti invece display:inline-block.
Inoltre è al contenitore dei li (non ai li), cioè all'ul oppure all'id socialid che devi assegnare margin:0 auto. E devi, sempre a questo contenitore assegnare una larghezza (o in px o in %) inferiore del contenitore rispetto a cui si deve centrare. Fai le prove per vedere quale valore potrebbe essere più opportuno.

Non vedo quella mancanza di fluidità che lamenti. Ma la vedi solo per uno dei 4 elementi o per tutti? Su più di un browser noti questo effetto?