fixed paddings on some devices

src/components/main/Header/styles.module.scss

@@ -14,7 +14,7 @@
 
   @include desktop {
     height: 64px;
-    padding: 0 $gap;
+    padding: 0;
   }
 
   &.is_scrolled {
@@ -28,7 +28,8 @@
   justify-content: flex-end;
   font-weight: 500;
   box-sizing: border-box;
-  flex: 0 1 $content_width;
+
+  @include container;
 }
 
 .spacer {

src/containers/main/Container/styles.module.scss

@@ -1,15 +1,5 @@
 @import "~/styles/variables.scss";
 
 .container {
-  width: 100%;
-  max-width: $content_width;
-  box-sizing: border-box;
-
-  @include tablet {
-    padding: 0;
-  }
-
-  @media (max-width: $content_width + $gap * 4) {
-    padding: 0;
-  }
+  @include container;
 }

src/layouts/FlowLayout/styles.module.scss

@@ -10,8 +10,7 @@
 $cols: $content_width / $cell;
 
 .container {
-  max-width: $content_width;
-  width: 100%;
+  @include container;
 }
 
 .grid {

src/styles/variables.scss

@@ -319,3 +319,16 @@ $sidebar_border: transparentize(white, 0.95);
 
   animation: __appear 0.25s forwards;
 }
+
+@mixin container {
+  max-width: $content_width + $gap * 8;
+  width: 100%;
+
+  padding-left: $gap * 4;
+  padding-right: $gap * 4;
+
+  @include tablet {
+    padding-left: $gap;
+    padding-right: $gap;
+  }
+}