diff --git a/client/js/client.js b/client/js/client.js
index ecc0bc8..c1f4b29 100644
--- a/client/js/client.js
+++ b/client/js/client.js
@@ -181,7 +181,7 @@ let SideView = Backbone.View.extend({
     }
 
     //calculateCardMargin($field.find(".card"), 351, 70, cards.length);
-    this.battleView.calculateMargin($field.find(".field-close"));
+    this.battleView.calculateMargin($field.find(".field-close"), 5);
   },
   renderRangeField: function(){
     if(!this.field.ranged) return;
@@ -210,7 +210,7 @@ let SideView = Backbone.View.extend({
     }
 
     //calculateCardMargin($field.find(".card"), 351, 70, cards.length);
-    this.battleView.calculateMargin($field.find(".field-range"));
+    this.battleView.calculateMargin($field.find(".field-range"), 5);
   },
   renderSiegeField: function(){
     if(!this.field.siege) return;
@@ -239,7 +239,7 @@ let SideView = Backbone.View.extend({
     }
 
     //calculateCardMargin($field.find(".card"), 351, 70, cards.length);
-    this.battleView.calculateMargin($field.find(".field-siege"));
+    this.battleView.calculateMargin($field.find(".field-siege"), 5);
   },
   renderWeatherField: function(){
     if(!this.field.weather) return;
@@ -587,15 +587,15 @@ let BattleView = Backbone.View.extend({
     minSize = typeof minSize === "number" && minSize >= 0 ? minSize : 6;
     var Class = $container.find(".card-wrap").length ? ".card-wrap" : ".card";
     var n = $container.children().size();
-    let w = $container.width(), c = $container.find(Class).outerWidth();
+    let w = $container.width(), c = $container.find(Class).outerWidth(true);
     let res;
     if(n < minSize)
       res = 0;
     else {
-      res = 0;//-((w - c) / (n - 1) - c) + 1
+      res = -((w - c) / (n - 1) - c) + 1;
     }
 
-    $container.find(Class).css("margin-left", -res);
+    $container.find(Class).not(Class+":first-child").css("margin-left", -res);
   }
 });
 
diff --git a/client/scss/_effects.scss b/client/scss/_effects.scss
index 6a21279..190855a 100644
--- a/client/scss/_effects.scss
+++ b/client/scss/_effects.scss
@@ -21,7 +21,7 @@
 
 .card {
   border: none !important;
-  margin: 0 !important;
+  margin: 0;
   border-radius: 0 !important;
   overflow: visible !important;
   height: 93px !important;
@@ -32,7 +32,9 @@
   height: 93px;
   width: 69px;
   position: relative;
-  transition: margin .05s ease-in-out 0s;
+
+  //causes weird bug when margin gets calculated
+  //transition: margin .05s ease-in-out 0s;
 }
 
 .card i {
@@ -79,13 +81,13 @@
   height: auto !important;
   width: auto !important;
   margin: 3px;
+
 }
 
-&.activeCard {
-    position: relative;
-    z-index: 19 !important;
-    transform: scale(1.1, 1.1) !important;
-  }
+.activeCard {
+  position: relative;
+  transform: scale(1.1, 1.1) !important;
+}
 
 .card-wrap .shadow,
 .grave .shadow {
@@ -99,7 +101,7 @@
   z-index: 20;
 }
 
-.card {
+/*.card {
   float: left;
   height: 93px;
   width: 69px;
@@ -114,7 +116,7 @@
   left: 3px;
   height: 87px;
   z-index: 10;
-}
+}*/
 
 /** SHAME **/