diff --git a/aio/src/app/custom-elements/api/api-list.component.html b/aio/src/app/custom-elements/api/api-list.component.html
index e7f101b2ad..e6b801b1d5 100644
--- a/aio/src/app/custom-elements/api/api-list.component.html
+++ b/aio/src/app/custom-elements/api/api-list.component.html
@@ -20,7 +20,7 @@
   </div>
 </div>
 
-<article class="api-list-container l-content-small docs-content">
+<article class="api-list-container">
   <div *ngFor="let section of filteredSections | async" >
     <h2 *ngIf="section.items"><a [href]="section.path" [class.deprecated-api-item]="section.deprecated">{{section.title}}</a></h2>
     <ul class="api-list" *ngIf="section.items && section.items.length">
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index b08244b364..ed60612515 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -86,9 +86,25 @@ aio-api-list {
 
   /* LAYOUT */
 
-  .docs-content {
+  .api-list-container {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 1100px;
+    padding: 16px 16px 16px 0;
     position: relative;
 
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      padding: 24px 0 0;
+    }
+
+    h2 {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+
     /* API CLASS LIST */
     .api-list {
       list-style: none;
@@ -134,27 +150,4 @@ aio-api-list {
       }
     }
   }
-
-  .l-content-small {
-    padding: 16px;
-    margin: 0;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      padding: 24px 0 0;
-    }
-  }
-
-  .api-list-container {
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    padding-left: 0;
-
-    h2 {
-      margin-top: 16px;
-      margin-bottom: 16px;
-    }
-  }
 }