Also apply max width to isolated header and footer

Author: reakaleek

src/Elastic.Markdown/Slices/Layout/_Footer.cshtml

@@ -2,12 +2,12 @@
 
 
 <footer class="text-grey-20 text-[12px] bg-ink-dark py-12 px-6">
-	<div class="container mx-auto">
+	<div class="max-w-(--max-layout-width) w-full mx-auto">
 		<a href="https://www.elastic.co/">
 			<img class="block" alt="Elastic logo" src="@Model.Static("logo-elastic-horizontal-white.svg")" width="120"/>
 		</a>
 	</div>
-	<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 rounded-tl-4xl rounded-tr-4xl items-center">
+	<div class="max-w-(--max-layout-width) w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 rounded-tl-4xl rounded-tr-4xl items-center">
 		<div>
 			<ul class="mt-4 flex gap-3">
 				<li>

src/Elastic.Markdown/Slices/Layout/_Header.cshtml

@@ -8,7 +8,7 @@
 else
 {
 	<header class="sticky top-0 z-50 bg-blue-developer text-white text-lg font-semibold h-(--offset-top) flex items-center px-6">
-		<div class="flex justify-between items-center">
+		<div class="max-w-(--max-layout-width) w-full mx-auto flex justify-between items-center">
 			@* ReSharper disable once Html.IdNotResolved *@
 			<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
 				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">