diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss
index f2d546790..93df188bc 100644
--- a/app/assets/stylesheets/mixins/layouts.scss
+++ b/app/assets/stylesheets/mixins/layouts.scss
@@ -25,10 +25,10 @@
 
 @mixin flex-with-gap($gap: rem-calc(map-get($grid-column-gutter, medium))) {
   display: flex;
-  margin-left: -$gap;
+  margin-#{$global-left}: -$gap;
 
   > * {
-    margin-left: $gap;
+    margin-#{$global-left}: $gap;
   }
 }