diff --git a/package-lock.json b/package-lock.json
index 51cf56bbb..0bf6b42dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.6",
+  "version": "2.8.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ebury/chameleon-components",
-      "version": "2.8.6",
+      "version": "2.8.7",
       "license": "MIT",
       "dependencies": {
         "@vueuse/core": "10.9.0",
diff --git a/package.json b/package.json
index e627a5eca..57a0ca49f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.6",
+  "version": "2.8.7",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
diff --git a/src/components/ec-container/ec-container.story.ts b/src/components/ec-container/ec-container.story.ts
index 555328a23..121736139 100644
--- a/src/components/ec-container/ec-container.story.ts
+++ b/src/components/ec-container/ec-container.story.ts
@@ -37,7 +37,7 @@ const Template: StoryFn<typeof EcContainer> = args => ({
         <div class="tw-bg-key-2 tw-text-gray-8 tw-min-h-screen">Navigation panel</div>
       </template>
       <template #content>
-        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen">Main content panel</div>
+        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen tw-w-screen">Main content panel</div>
       </template>
     </ec-container>
   `,
@@ -161,8 +161,8 @@ export const withNavigation: ContainerWithNavigationStory = ({
       </template>
       <template #content>
         <ec-main-container>
-          <p class="tw-mb-16">Lorem ipsum dolor sit amet, consectetur <a href="//google.co.uk">adipiscing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Proin nibh nisl condimentum id venenatis a. Pellentesque habitant morbi tristique senectus et netus et. Sapien eget mi proin sed. Dui faucibus in ornare quam. Ut ornare lectus sit amet est. Sed enim ut sem viverra aliquet eget sit. Dui sapien eget mi proin. Nunc aliquet bibendum enim facilisis gravida.</p>
-          <p>Sem integer vitae justo eget magna. Neque convallis a cras semper auctor. Velit euismod in pellentesque massa placerat duis ultricies. Tincidunt dui ut ornare lectus sit amet est. Nunc sed id semper risus in. Senectus et netus et malesuada fames ac turpis egestas maecenas. Turpis nunc eget lorem dolor sed viverra. Leo integer malesuada nunc vel risus commodo. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Tempus egestas sed sed risus pretium quam vulputate dignissim.</p>
+          <p class="tw-mb-16 tw-min-w-full">Lorem ipsum dolor sit amet, consectetur <a href="//google.co.uk">adipiscing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Proin nibh nisl condimentum id venenatis a. Pellentesque habitant morbi tristique senectus et netus et. Sapien eget mi proin sed. Dui faucibus in ornare quam. Ut ornare lectus sit amet est. Sed enim ut sem viverra aliquet eget sit. Dui sapien eget mi proin. Nunc aliquet bibendum enim facilisis gravida.</p>
+          <p class="tw-min-w-full">Sem integer vitae justo eget magna. Neque convallis a cras semper auctor. Velit euismod in pellentesque massa placerat duis ultricies. Tincidunt dui ut ornare lectus sit amet est. Nunc sed id semper risus in. Senectus et netus et malesuada fames ac turpis egestas maecenas. Turpis nunc eget lorem dolor sed viverra. Leo integer malesuada nunc vel risus commodo. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Tempus egestas sed sed risus pretium quam vulputate dignissim.</p>
         </ec-main-container>
       </template>
     </ec-container>
@@ -222,7 +222,7 @@ export const withResponsiveLayout: StoryFn<typeof EcContainer> = args => ({
         <div class="tw-bg-key-2 tw-text-gray-8 tw-min-h-48">Navigation panel</div>
       </template>
       <template #content>
-        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen">Main content panel</div>
+        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen tw-w-screen">Main content panel</div>
       </template>
     </ec-container>
   `,
diff --git a/src/components/ec-container/ec-container.vue b/src/components/ec-container/ec-container.vue
index 13e96f6da..95095556b 100644
--- a/src/components/ec-container/ec-container.vue
+++ b/src/components/ec-container/ec-container.vue
@@ -51,7 +51,7 @@ defineProps<ContainerProps>();
   }
 
   &__content {
-    @apply tw-flex-1;
+    @apply tw-flex tw-flex-1 tw-justify-center;
     @apply tw-min-w-0;
   }
 }
diff --git a/src/components/ec-main-container/ec-main-container.vue b/src/components/ec-main-container/ec-main-container.vue
index 3f1b9209d..467997abf 100644
--- a/src/components/ec-main-container/ec-main-container.vue
+++ b/src/components/ec-main-container/ec-main-container.vue
@@ -65,9 +65,16 @@ function hasSlot(slotName: string) {
 </script>
 
 <style>
+:root,
+:host {
+  --ec-main-container-max-width: 1200px;
+}
+
 .ec-main-container {
   @apply tw-p-24;
-  @apply tw-min-h-full;
+  @apply tw-min-h-full tw-w-full;
+
+  max-width: var(--ec-main-container-max-width);
 
   &__title {
     @apply tw-h2;
diff --git a/tests/integration/snapshots/visual-regression.spec.js/layout-container--with-navigation__chrome.snap.png b/tests/integration/snapshots/visual-regression.spec.js/layout-container--with-navigation__chrome.snap.png
index bf15058d2..daf3e9ea5 100644
Binary files a/tests/integration/snapshots/visual-regression.spec.js/layout-container--with-navigation__chrome.snap.png and b/tests/integration/snapshots/visual-regression.spec.js/layout-container--with-navigation__chrome.snap.png differ
diff --git a/tests/integration/snapshots/visual-regression.spec.js/layout-container--with-navigation__firefox.snap.png b/tests/integration/snapshots/visual-regression.spec.js/layout-container--with-navigation__firefox.snap.png
index de1297a74..9d73709b0 100644
Binary files a/tests/integration/snapshots/visual-regression.spec.js/layout-container--with-navigation__firefox.snap.png and b/tests/integration/snapshots/visual-regression.spec.js/layout-container--with-navigation__firefox.snap.png differ