$page-marging need to be !default

static/includes/_cells.scss

@@ -31,20 +31,16 @@ $cell-image-position: after-title !default;
 // $cell-image-padding: define padding of cell image.
 $cell-image-padding: 0.5rem !default;
 
-.gru-content #columns > .cell,
-div#left div.block,
-.gru-content #left .cell { margin-left: 0; }
-.gru-content #columns > .cell,
-div#right div.block,
-.gru-content #right .cell { margin-right: 0; }
 
-@media screen and (max-width: $mobile-limit) {
+// In 2 cols template, add gutter 
+@media screen and (min-width: $mobile-limit+1px) {
 	div#left div.block,
-	.gru-content #left .cell,
+	.gru-content #left .cell { 
+		margin-right: $page-padding; 
+	}
 	div#right div.block,
-	.gru-content #right .cell {
-		margin-right: 0;
-		margin-left: 0;
+	.gru-content #right .cell { 
+		margin-left: $page-padding; 
 	}
 }
 
@@ -81,7 +77,8 @@ div#left div.a2-block, div#right div.a2-block,
 .gru-content div.cell,
 div.block {
 	padding: 0;
-	margin: 0px 10px 10px 10px;
+	margin-bottom: $page-padding;
+	// margin: 0 $page-padding $page-padding $page-padding;
 
 	& h2 + div {
 		padding: 1rem;
@@ -225,7 +222,7 @@ div.wcscurrentformscell ul {
 		color: #666;
 		p {
 			margin-top: 0;
-			margin-bottom: 0.7em;
+			margin-bottom: $page-padding;
 		}
 		border-bottom: 1px solid $cell-entry-border-color;
 	}
@@ -300,7 +297,7 @@ div.cell {
 			margin: 0;
 		}
 		p + p {
-			margin-top: 0.7em;
+			margin-top: $page-padding;
 		}
 	}
 	&::after {
@@ -317,7 +314,7 @@ div.cell {
 		border-bottom: 0;
 		p:last-child {
 			margin-bottom: 0;
-			padding-bottom: 0.7em;
+			padding-bottom: $page-padding;
 		}
 		+ div {
 			margin-top: 0;
@@ -328,7 +325,7 @@ div.cell {
 			}
 			p:first-child {
 				margin-top: 0;
-				padding-top: 0.7em;
+				padding-top: $page-padding;
 			}
 		}
 	}
@@ -613,7 +610,7 @@ div#login-page.methods3 > div.block {
 	@media screen and (max-width: $mobile-limit) {
 		width: auto;
 		float: none;
-		margin: 0.7em;
+		margin: $page-padding 0;
 	}
 }
 

static/includes/_layout.scss

@@ -6,12 +6,23 @@ $footer-color: white !default;
 $top-logo-width: 0 !default;
 $sidebar-width: 300px !default;
 $sidebar-position: left !default;
+$page-padding: 0.7em !default;
 
 html, body {
 	margin: 0;
 	min-height: 100vh;
 }
 
+// Set page-margin and max-width to layout blocs
+.page-wrapper {
+	padding-left: $page-padding;
+	padding-right: $page-padding;
+	max-width: $width;
+	// Respect existing $width
+	box-sizing: content-box;
+}
+
+
 div#page {
 	display: -ms-flexbox;
 	display: -webkit-flex;
@@ -28,7 +39,7 @@ div#page main {
 	-ms-flex: 1 0 auto;
 	-webkit-flex: 1 0 auto;
 	flex: 1 0 auto;
-	width: 100%;
+	// width: 100%;
 }
 
 div#header,
@@ -37,15 +48,17 @@ div#footer {
 	clear: both;
 	max-width: $width;
 	margin: 0 auto;
+	// padding-left: $page-padding;
+	// padding-right: $page-padding;
 }
 
 div#header {
-	box-sizing: border-box;
-	width: 100%;
+	// box-sizing: border-box;
+	// width: 100%;
 	position: relative;
 	top: 0px;
 	z-index: 0;
-	padding: 0 0.7em;
+	// padding: 0 0.7em;
 	& h1 {
 		margin: 0;
 	}
@@ -60,9 +73,9 @@ div#header {
 div#main-content-wrapper {
 	position: relative;
 	z-index: 100;
-	max-width: $width;
+	// max-width: $width;
 	margin: 0px auto 0px auto;
-	padding: 0;
+	// padding: 0;
 	@media screen and (max-width: $mobile-limit) {
 		position: static;
 		z-index: 0;
@@ -108,9 +121,9 @@ div#main-content {
 		div.cell {
 			@if $sidebar-position == left {
 				margin-left: 0;
-				margin-right: 20px;
+				margin-right: $page-padding * 2;
 			} @else {
-				margin-left: 20px;
+				margin-left: $page-padding * 2;
 				margin-right: 0px;
 			}
 		}
@@ -119,7 +132,7 @@ div#main-content {
 
 @media screen and (max-width: $mobile-limit) {
 	#columns {
-		padding: 0 0.7em;
+		// padding: 0 0.7em;
 		max-width: 100%;
 	}
 	#right, #left {
@@ -136,7 +149,7 @@ div#main-content {
 			-webkit-flex: 0 0 auto;
 			flex: 0 0 auto;
 			max-width: 100%;
-			margin: 0 0.7em;
+			// margin: 0 0.7em;
 			div.cell {
 				margin-left: 0;
 				margin-right: 0;

static/includes/_nav.scss

@@ -64,7 +64,6 @@ $nav-mobile-bottom-bar-badge-background: #e22 !default;
 }
 
 div.gru-nav {
-	padding: 0;
 	margin: 10px auto;
 	height: $nav-height;
 	border-radius: $border-radius;
@@ -199,6 +198,7 @@ div.menucell {
 	}
 
 	div.gru-nav {
+		padding: 0;
 		height: auto;
 		background: transparent;
 		@if $responsive-menu == left-to-right {

templates/theme.html

@@ -52,7 +52,7 @@
     <header role="banner">
     <div id="header-wrapper" >
     {% block header-pre %}{% endblock %}
-    <div id="header">
+    <div id="header" class="page-wrapper">
      {% block header-top %}{% endblock %}
      <div id="top">
        {% block header-title %}
@@ -81,7 +81,7 @@
 <nav role="navigation">
 <div id="nav-wrapper" class="gru-nav-wrapper">
 {% block nav-pre %}{% endblock %}
-<div id="nav" class="gru-nav togglable">
+<div id="nav" class="gru-nav page-wrapper togglable">
 {% block nav-top %}{% endblock %}
   <button id="nav-button" class="gru-nav-button togglable" aria-label="Menu">
     <span class="sr-only">Ouvrir le menu</span>
@@ -108,7 +108,7 @@
   {% endblock %}
 
   <main role="main">
-  <div id="main-content-wrapper">
+  <div id="main-content-wrapper" class="page-wrapper">
     <div id="main-content">
 
 {% block content-messages %}
@@ -143,7 +143,7 @@
    <footer role="contentinfo">
     {% block footer-top %}{% endblock %}
     <div id="footer-wrapper">
-    <div id="footer">
+    <div id="footer" class="page-wrapper">
       {% block footer %}
       <p id="legal">Copyright © 2005-2016 Entr'ouvert</p>
       {% endblock %}