diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 874b6d0416..1414fd8391 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -32,18 +32,6 @@ button {
 
 .itemsContainer {
     display: flex;
-    margin-left: -0.6em;
-    margin-right: -0.6em;
-}
-
-/* TODO replace this with a proper fix */
-/* doesnt work on mobile devices */
-/* negative margin fixes annoying misalignment with cards and title */
-@media all and (max-width:50em) {
-    .itemsContainer {
-        margin-left: 0;
-        margin-right: 0;
-    }
 }
 
 .vertical-list {
@@ -364,9 +352,6 @@ button {
     vertical-align: middle;
     font-family: inherit;
     font-size: inherit;
-    /*display: flex;
-    align-items: center;
-    justify-content: center;*/
 }
 
 .textActionButton:hover {
diff --git a/src/components/emby-scroller/emby-scroller.css b/src/components/emby-scroller/emby-scroller.css
index f060882f7b..1e0b05b83c 100644
--- a/src/components/emby-scroller/emby-scroller.css
+++ b/src/components/emby-scroller/emby-scroller.css
@@ -7,6 +7,17 @@
     margin-right: 3.3%;
 }
 
+/* align first card in scroller to heading */
+.emby-scroller .card:first-of-type > .cardBox {
+    margin-left: 0;
+}
+
+/* align heading for normal item containers */
+/* still not ideal solution but better than the last method */
+.verticalSection > .itemsContainer .cardBox {
+    margin-left: 0;
+}
+
 @media all and (max-width:50em) {
     .emby-scroller {
         padding-left: 3.3%;