diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less
index 8b3e3a5..43aa6c4 100644
--- a/resources/skins.vector.styles/Sidebar.less
+++ b/resources/skins.vector.styles/Sidebar.less
@@ -21,7 +21,7 @@
 	min-height: @size-sidebar-button;
 	width: @size-sidebar-button;
 	height: @size-sidebar-button;
-	border: 1px solid transparent;
+	border: @border-width-base @border-style-base transparent;
 	border-radius: @border-radius-base;
 
 	&:before {
diff --git a/resources/skins.vector.styles/layout-max-width.less b/resources/skins.vector.styles/layout-max-width.less
index 60c9aa9..4457a1a 100644
--- a/resources/skins.vector.styles/layout-max-width.less
+++ b/resources/skins.vector.styles/layout-max-width.less
@@ -94,6 +94,10 @@
 		// we apply top and bottom padding.
 		padding-top: 8px;
 		padding-bottom: 40px;
+		// Adjust the left position of the sidebar to align it with the sidebar menu button,
+		// in the header, while ensuring the background gradient still extends to the edge of the screen.
+		// note: the 1px comes from the transparent border of the sidebar button
+		padding-left: @margin-horizontal-sidebar-button-icon + @border-width-base;
 	}
 
 	.mw-footer {