diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 8d26205..9bc6a36 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -123,7 +123,9 @@
 </div>
 
 <div class="mw-workspace-container mw-footer-container">
-	{{#data-footer}}{{>Footer}}{{/data-footer}}
+	<div class="mw-content-container">
+		{{#data-footer}}{{>Footer}}{{/data-footer}}
+	</div>
 </div>
 	</div> {{! END mw-page-container-inner }}
 </div> {{! END mw-page-container }}
diff --git a/resources/skins.vector.styles/layout-max-width.less b/resources/skins.vector.styles/layout-max-width.less
index 51a2925..d9fc895 100644
--- a/resources/skins.vector.styles/layout-max-width.less
+++ b/resources/skins.vector.styles/layout-max-width.less
@@ -99,7 +99,8 @@
 	}
 
 	.mw-footer {
-		padding: 0;
+		border-top: @border-base;
+		padding: 32px 0 0 0;
 	}
 
 	// Container logic.
@@ -109,7 +110,6 @@
 		margin-left: auto;
 		margin-right: auto;
 		padding: 0 @padding-horizontal-page-container;
-		overflow: hidden;
 		background-color: @background-color-page-container;
 	}
 
@@ -144,10 +144,8 @@
 	}
 
 	.mw-footer-container {
-		margin-top: 50px;
-		margin-bottom: 50px;
-		padding: 32px 0;
-		border-top: @border-base;
+		padding-top: 50px;
+		padding-bottom: 82px;
 	}
 
 	// For container logic specific to special pages and history pages.
@@ -173,6 +171,15 @@
 		}
 	}
 
+	// We want it to appear like the sidebar is going into/coming out of
+	// `.mw-page-container`, but we can't use `overflow: hidden` on
+	// `.mw-page-container` because that will cut off the sidebar. Therefore, we
+	// calculate the maximum distance from the start of `mw-page-container` to the
+	// start of the sidebar.
+	#mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar {
+		.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
+	}
+
 	// Responsive overrides.
 	@media ( min-width: @min-width-page-container--padded ) {
 		@border-color: @border-color-sidebar;
@@ -198,7 +205,7 @@
 
 	@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
 		#mw-panel {
-			background: none;
+			background: @background-color-page-container;
 			border-right: 1px solid @border-color-sidebar;
 		}
 	}