diff --git a/.changeset/long-hornets-share.md b/.changeset/long-hornets-share.md
new file mode 100644
index 0000000000..039b9f28a6
--- /dev/null
+++ b/.changeset/long-hornets-share.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Improved Container styles, changing our max-width to 120rem and improving padding on smaller screens.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index bc473d2006..bcd347382c 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -103,9 +103,22 @@
 }
 
 .canon-Container {
-  max-width: 75rem;
+  max-width: 120rem;
+  padding: 0 var(--canon-space-4);
   margin: 0 auto;
-  padding: 0 1rem;
+  transition: padding .2s ease-in-out;
+}
+
+@media (width >= 640px) {
+  .canon-Container {
+    padding: 0 var(--canon-space-8);
+  }
+}
+
+@media (width >= 1024px) {
+  .canon-Container {
+    padding: 0 var(--canon-space-12);
+  }
 }
 
 .canon-Icon {
diff --git a/packages/canon/css/container.css b/packages/canon/css/container.css
index d9fe861f3b..4ba6b65dee 100644
--- a/packages/canon/css/container.css
+++ b/packages/canon/css/container.css
@@ -1,5 +1,18 @@
 .canon-Container {
-  max-width: 75rem;
+  max-width: 120rem;
+  padding: 0 var(--canon-space-4);
   margin: 0 auto;
-  padding: 0 1rem;
+  transition: padding .2s ease-in-out;
+}
+
+@media (width >= 640px) {
+  .canon-Container {
+    padding: 0 var(--canon-space-8);
+  }
+}
+
+@media (width >= 1024px) {
+  .canon-Container {
+    padding: 0 var(--canon-space-12);
+  }
 }
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index b5093e217c..37c5cb4d2d 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9309,9 +9309,22 @@
 }
 
 .canon-Container {
-  max-width: 75rem;
+  max-width: 120rem;
+  padding: 0 var(--canon-space-4);
   margin: 0 auto;
-  padding: 0 1rem;
+  transition: padding .2s ease-in-out;
+}
+
+@media (width >= 640px) {
+  .canon-Container {
+    padding: 0 var(--canon-space-8);
+  }
+}
+
+@media (width >= 1024px) {
+  .canon-Container {
+    padding: 0 var(--canon-space-12);
+  }
 }
 
 .canon-Icon {
diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css
index 7c7c323cb5..1ebf63987f 100644
--- a/packages/canon/src/components/Container/styles.css
+++ b/packages/canon/src/components/Container/styles.css
@@ -1,5 +1,18 @@
 .canon-Container {
-  max-width: 75rem;
-  padding: 0 1rem;
+  max-width: 120rem;
+  padding: 0 var(--canon-space-4);
   margin: 0 auto;
+  transition: padding 0.2s ease-in-out;
+}
+
+@media (min-width: 640px) {
+  .canon-Container {
+    padding: 0 var(--canon-space-8);
+  }
+}
+
+@media (min-width: 1024px) {
+  .canon-Container {
+    padding: 0 var(--canon-space-12);
+  }
 }