fix: smoother sliding of ledgers on homepage (#924)

Updates the transition for new ledgers to be smoother by rendering the
ledger as its full width off to the left and move it to the right.

Also update everywhere `0px` was used to `0` in `ledger.scss`.

src/containers/Ledgers/css/ledgers.scss

@@ -56,7 +56,7 @@ $ledger-width: 196px;
           max-width: calc(30% - 5px);
           padding-top: 1.5px;
           font-size: 11px;
-          letter-spacing: 0px;
+          letter-spacing: 0;
         }
 
         @include for-size(tablet-landscape-up) {
@@ -98,11 +98,10 @@ $ledger-width: 196px;
   }
 
   .ledger {
-    overflow: visible;
     width: $ledger-width;
     flex-grow: 0;
     flex-shrink: 0;
-    margin-left: $ledgers-margin-large;
+    margin-right: $ledgers-margin-large;
     animation-duration: 0.4s;
     animation-name: ledger-enter;
     white-space: normal;
@@ -114,12 +113,10 @@ $ledger-width: 196px;
 
   @keyframes ledger-enter {
     from {
-      width: 0;
-      margin-left: -$ledgers-margin-large;
+      margin-left: -$ledger-width;
     }
 
     to {
-      width: $ledger-width;
       margin-left: 0;
     }
   }
@@ -228,7 +225,7 @@ $ledger-width: 196px;
 
   .hash {
     overflow: hidden;
-    padding: 0px 32px 32px;
+    padding: 0 32px 32px;
     border: 1px solid $black-60;
     border-top: 0;
     background: rgba($black-80, 0.7);
@@ -238,7 +235,7 @@ $ledger-width: 196px;
 
     .bar {
       height: 2px;
-      margin: 0px -32px;
+      margin: 0 -32px;
     }
 
     &.unselected {