diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 9c32711..d0986e0 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -219,7 +219,7 @@ nav {
   z-index: 9999;
 }
 
-@media (max-width: 1512px) {
+@media (max-width: 1528px) {
   .sidebar-layout {
     display: none;
   }
@@ -277,6 +277,7 @@ nav {
     display: grid;
     grid-template-rows: repeat(2, auto);
     column-gap: var(--component-gap);
+    max-width: 100%;
   }
 
   .breadcrumb-layout {
@@ -348,6 +349,23 @@ nav {
   }
 }
 
+.api {
+  margin: 2rem 0 2rem 2rem;
+  width: 100%;
+  .row {
+    display: grid !important;
+  }
+
+  .nginx-docs-api-container {
+    grid-column: 1 / -1 !important;
+    max-width: 100% !important;
+  }
+
+  .content-layout {
+    grid-template-columns: 1fr var(--side-gutter-width);
+  }
+}
+
 .main {
   display: flex;
 }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 419f576..f301905 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -57,7 +57,7 @@
       });
 
       // swap out v1 and v2 elements
-      const v1ElementIds = ["sidebar", "footer", "toc"];
+      const v1ElementIds = ["sidebar", "footer", "toc", "api"]
 
       v1ElementIds.forEach((elementId) => {
         const element = document.getElementById(elementId);