Abstand der Widgets in Sidebar verringern

Also die gesamte widget area erwischst Du mit
.widget-area { margin:0; }
Damit schiebt sich der gesamte Bereich ein Stück nach oben.
Die social Buttons Reihe rechts kommt dann aber höher als die Überschrift des ersten Beitrages links.

Den Abstand zwischen den einzelnen widget's kannst Du einstellen mittels
.widget-area .widget { margin-bottom:0; }

Aber die Frage an sich zeigt doch, dass Du das add-on Firebug von Firefox nicht kennst.
Bitte installiere Dir dieses add-on und Rechtsklicke den umzukonfigurierenden Teil,
damit Du auswählen kannst: "Element mit Firebug untersuchen" !
Dann siehst Du den HTML Quelltext, der im Firefox ankommt und die dazugehörigen CSS Befehle,
die an den einzelnen Elementen wirken.
Neben den CSS Befehlen kannst Du klicken, um diese abzuschalten,
bzw. in diese Befehle hinein, um sie zu ändern oder auch neue hinzuzufügen.
Die jeweils aktive Stelle im HTML Text ist markiert, damit findet man schnell was wo zu tun ist.
Probiere das aus und solche Fragen gehören hier der Vergangenheit an. !!!

Und wenn ein CSS Befehl einmal partout nicht wirken will, dann gibt es das Notmittel
!important nach dem Befehl und vor dem Semikolon, oder probiere eine direktere Adressierung des zu verändern Elementes aus. Manchmal ist es auch mir nicht gelungen, weil der php Programmierer keine adressierbaren Elemente zur Verfügung gestellt hat. Dann hilft nur noch den php code zu erweitern, indem man an die entsprechenden HTML Elemente mit id's versorgt. Das kommt aber zum Glück höchst selten vor.
Bei all dem Bitte aufpassen, das man die updatefähigkeit seiner Installation nicht verliert, aber das merkt man ja dann. Nur hat man seine Änderungen auch irgendwo aufgeschrieben ???

Firefox und Chrome haben in den neueren Versionen bereits integrierte Developer-Tools, somit ist eine nachträgliche Installation von Firebug nicht zwingend notwendig