diff --git a/app/assets/stylesheets/admin/machine_learning/settings.scss b/app/assets/stylesheets/admin/machine_learning/settings.scss
index 788cc95e6..9ec712617 100644
--- a/app/assets/stylesheets/admin/machine_learning/settings.scss
+++ b/app/assets/stylesheets/admin/machine_learning/settings.scss
@@ -1,13 +1,10 @@
 .admin .machine-learning-settings {
 
   .settings-management {
-    $gap: rem-calc(map-get($grid-column-gutter, medium));
-    display: flex;
+    @include flex-with-gap;
     flex-wrap: wrap;
-    margin-left: -$gap;
 
     > * {
-      margin-left: $gap;
       flex-basis: calc((#{rem-calc(720)} - 100%) * 999);
       flex-grow: 1;
     }
diff --git a/app/assets/stylesheets/admin/poll/questions/filter.scss b/app/assets/stylesheets/admin/poll/questions/filter.scss
index 78cb4fb4f..498872d2b 100644
--- a/app/assets/stylesheets/admin/poll/questions/filter.scss
+++ b/app/assets/stylesheets/admin/poll/questions/filter.scss
@@ -1,13 +1,8 @@
 .admin .poll-questions-filter {
   $gap: 0.5em;
+  @include flex-with-gap($gap);
   align-items: flex-end;
-  display: flex;
   flex-wrap: wrap;
-  margin-left: -$gap;
-
-  > * {
-    margin-left: $gap;
-  }
 
   [type="submit"] {
     @include regular-button;
diff --git a/app/assets/stylesheets/admin/table_actions.scss b/app/assets/stylesheets/admin/table_actions.scss
index fde0365b5..9473c4b36 100644
--- a/app/assets/stylesheets/admin/table_actions.scss
+++ b/app/assets/stylesheets/admin/table_actions.scss
@@ -1,10 +1,7 @@
 .admin .table-actions {
+  @include flex-with-gap(1.6em);
   align-items: flex-start;
-  display: flex;
-
-  > :not(:first-child) {
-    margin-left: rem-calc(10);
-  }
+  padding: 0 0.5em;
 
   a,
   button {
@@ -13,7 +10,6 @@
     flex-direction: column;
     font-size: 0.9em;
     line-height: $global-lineheight;
-    margin-right: 1em;
     text-align: center;
 
     &:hover,
diff --git a/app/assets/stylesheets/budgets/executions/filters.scss b/app/assets/stylesheets/budgets/executions/filters.scss
index 5044ad003..9517f4d20 100644
--- a/app/assets/stylesheets/budgets/executions/filters.scss
+++ b/app/assets/stylesheets/budgets/executions/filters.scss
@@ -2,14 +2,8 @@
   margin-bottom: $line-height / 2;
 
   @include breakpoint(medium) {
-    $gap: 1em;
+    @include flex-with-gap(1em);
     align-items: flex-end;
-    display: flex;
-    margin-left: -$gap;
-
-    > * {
-      margin-left: $gap;
-    }
   }
 
   select {
diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index 31a8f8125..4871506ed 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -2,10 +2,9 @@
   $spacing: $line-height / 2;
 
   .headings-list {
-    display: flex;
+    @include flex-with-gap($spacing);
     flex-wrap: wrap;
     list-style: none;
-    margin-left: -$spacing;
   }
 
   .heading {
@@ -14,7 +13,6 @@
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     margin-bottom: $line-height / 2;
-    margin-left: $spacing;
     margin-top: $line-height / 4;
     padding: $line-height / 2;
     position: relative;
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index 3b1b8af18..f9bd55892 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -179,12 +179,9 @@
     margin-top: $line-height;
 
     @include breakpoint(medium) {
-      $gap: rem-calc(map-get($grid-column-gutter, "medium"));
-      display: flex;
-      margin-left: -$gap;
+      @include flex-with-gap;
 
       > * {
-        margin-left: $gap;
         width: 50%;
       }
 
diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss
index 8fffc6868..ca01c3f16 100644
--- a/app/assets/stylesheets/layout/locale_switcher.scss
+++ b/app/assets/stylesheets/layout/locale_switcher.scss
@@ -57,14 +57,8 @@
   }
 
   ul {
-    $gap: 0.75em;
-    display: flex;
+    @include flex-with-gap(0.75em);
     flex-wrap: wrap;
-    margin-left: -$gap;
-
-    > * {
-      margin-left: $gap;
-    }
 
     li::after {
       content: none;
diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss
index fecb67d2c..f2d546790 100644
--- a/app/assets/stylesheets/mixins/layouts.scss
+++ b/app/assets/stylesheets/mixins/layouts.scss
@@ -23,6 +23,15 @@
   }
 }
 
+@mixin flex-with-gap($gap: rem-calc(map-get($grid-column-gutter, medium))) {
+  display: flex;
+  margin-left: -$gap;
+
+  > * {
+    margin-left: $gap;
+  }
+}
+
 @mixin full-width-cover($adjust-margin: true, $adjust-padding: false) {
   $global-padding: rem-calc(map-get($grid-column-gutter, medium)) / 2;
   bottom: 0;
diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss
index 3b5299dfc..76cdb67b2 100644
--- a/app/assets/stylesheets/widgets/feeds/participation.scss
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -1,8 +1,6 @@
 .feeds-participation {
-  $gap: rem-calc(map-get($grid-column-gutter, medium));
-  display: flex;
+  @include flex-with-gap;
   flex-wrap: wrap;
-  margin-left: -$gap;
 
   .feed-proposals {
     flex-basis: rem-calc(480);
@@ -17,7 +15,6 @@
   .feed-proposals,
   .feed-debates {
     display: flex;
-    margin-left: $gap;
     margin-top: $line-height;
     flex-direction: column;