diff --git a/src/Main.test.tsx b/src/Main.test.tsx
index 0cf848f2..8e512dd6 100644
--- a/src/Main.test.tsx
+++ b/src/Main.test.tsx
@@ -23,9 +23,4 @@ describe('Main', () => {
     const { getByTestId } = renderWrapper(<Main />);
     expect(getByTestId('authz-module')).toBeInTheDocument();
   });
-
-  it('wraps the body in an xl container to align it with the header', () => {
-    const { getByTestId } = renderWrapper(<Main />);
-    expect(getByTestId('authz-module').closest('.container-mw-xl')).toBeInTheDocument();
-  });
 });
diff --git a/src/Main.tsx b/src/Main.tsx
index 44cdeff9..a668e205 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,5 +1,4 @@
 import { CurrentAppProvider, PageWrap, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Container } from '@openedx/paragon';
 import { Helmet } from 'react-helmet';
 
 import { appId } from './constants';
@@ -20,9 +19,7 @@ const Main = () => {
         </title>
       </Helmet>
       <PageWrap>
-        <Container size="xl" fluid className="px-0">
-          <AuthZModule />
-        </Container>
+        <AuthZModule />
       </PageWrap>
     </CurrentAppProvider>
   );
diff --git a/src/authz-module/audit-user/index.tsx b/src/authz-module/audit-user/index.tsx
index ce852441..7e35616f 100644
--- a/src/authz-module/audit-user/index.tsx
+++ b/src/authz-module/audit-user/index.tsx
@@ -3,9 +3,7 @@ import {
   useContext, useEffect, useMemo, useState,
 } from 'react';
 import { SiteContext, useIntl } from '@openedx/frontend-base';
-import {
-  Container, DataTable,
-} from '@openedx/paragon';
+import { DataTable } from '@openedx/paragon';
 import TableFooter from '@src/authz-module/components/TableFooter/TableFooter';
 import {
   AUTHZ_HOME_PATH, TABLE_DEFAULT_PAGE_SIZE,
@@ -228,7 +226,7 @@ const AuditUserPage = () => {
   };
 
   return (
-    <div className="authz-module">
+    <>
       <ConfirmDeletionModal
         isOpen={showConfirmDeletionModal}
         close={handleCloseConfirmDeletionModal}
@@ -243,11 +241,6 @@ const AuditUserPage = () => {
         }}
       />
       <AuthZLayout
-        context={{
-          id: '',
-          org: '',
-          title: '',
-        }}
         navLinks={navLinks}
         activeLabel={user?.username || ''}
         pageTitle={user?.username || ''}
@@ -258,7 +251,7 @@ const AuditUserPage = () => {
           ]
         }
       >
-        <Container className="bg-light-200 p-5">
+        <div className="page-band py-5">
           <DataTable
             isPaginated
             isFilterable
@@ -283,10 +276,9 @@ const AuditUserPage = () => {
             <DataTable.Table />
             <TableFooter />
           </DataTable>
-
-        </Container>
+        </div>
       </AuthZLayout>
-    </div>
+    </>
   );
 };
 
diff --git a/src/authz-module/authz-home/index.tsx b/src/authz-module/authz-home/index.tsx
index 03fa3fc7..15250122 100644
--- a/src/authz-module/authz-home/index.tsx
+++ b/src/authz-module/authz-home/index.tsx
@@ -21,29 +21,25 @@ const AuthzHome = () => {
   const pageTitle = intl.formatMessage(messages['authz.manage.page.title']);
 
   return (
-    <div className="authz-module">
-      <AuthZLayout
-        context={{ id: '', title: '', org: '' }}
-        pageTitle={pageTitle}
-        pageSubtitle=""
-        actions={
-          [<AddRoleButton key="add-role-button" />]
-        }
+    <AuthZLayout
+      pageTitle={pageTitle}
+      actions={
+        [<AddRoleButton key="add-role-button" />]
+      }
+    >
+      <Tabs
+        variant="tabs"
+        defaultActiveKey={hash ? 'permissionsRoles' : 'team'}
+        className="page-band bg-light-100"
       >
-        <Tabs
-          variant="tabs"
-          defaultActiveKey={hash ? 'permissionsRoles' : 'team'}
-          className="bg-light-100 px-5"
-        >
-          <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5 bg-light-200">
-            <TeamMembersTable presetScope={presetScope} />
-          </Tab>
-          <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])}>
-            <RolesPermissions />
-          </Tab>
-        </Tabs>
-      </AuthZLayout>
-    </div>
+        <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="page-band py-5">
+          <TeamMembersTable presetScope={presetScope} />
+        </Tab>
+        <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])} className="page-band py-5">
+          <RolesPermissions />
+        </Tab>
+      </Tabs>
+    </AuthZLayout>
   );
 };
 
diff --git a/src/authz-module/components/AuthZLayout.tsx b/src/authz-module/components/AuthZLayout.tsx
index e657c493..4c714766 100644
--- a/src/authz-module/components/AuthZLayout.tsx
+++ b/src/authz-module/components/AuthZLayout.tsx
@@ -3,19 +3,21 @@ import AuthZTitle, { AuthZTitleProps } from './AuthZTitle';
 
 interface AuthZLayoutProps extends AuthZTitleProps {
   children: ReactNode;
-  context: {
-    id: string;
-    org: string;
-    title: string;
-  };
 }
 
-const AuthZLayout = ({ children, ...props }: AuthZLayoutProps) => (
-  <>
-    <AuthZTitle {...props} />
-    {children}
-  </>
-
+/**
+ * Page chrome for the authz module: the title band, then the body below it.
+ * The body only paints its colour, edge to edge. Each page marks the parts of its
+ * content that should line up with the header using `page-band`, so anything meant
+ * to bleed across the full width -- a stepper header, a toolbar -- simply omits it.
+ */
+const AuthZLayout = ({ children, ...titleProps }: AuthZLayoutProps) => (
+  <div className="authz-module">
+    <AuthZTitle {...titleProps} />
+    <div className="bg-light-200">
+      {children}
+    </div>
+  </div>
 );
 
 export default AuthZLayout;
diff --git a/src/authz-module/components/AuthZTitle.test.tsx b/src/authz-module/components/AuthZTitle.test.tsx
index 6b76f709..a9676830 100644
--- a/src/authz-module/components/AuthZTitle.test.tsx
+++ b/src/authz-module/components/AuthZTitle.test.tsx
@@ -12,14 +12,12 @@ describe('AuthZTitle', () => {
   const defaultProps = {
     activeLabel: 'Current Page',
     pageTitle: 'Page Title',
-    pageSubtitle: 'Page Subtitle',
   };
 
   it('renders without optional fields', () => {
     render(<AuthZTitle {...defaultProps} />);
     expect(screen.getByText(defaultProps.activeLabel)).toBeInTheDocument();
     expect(screen.getByText(defaultProps.pageTitle)).toBeInTheDocument();
-    expect(screen.getByText(defaultProps.pageSubtitle as string)).toBeInTheDocument();
   });
 
   it('renders breadcrumb with links and active label', () => {
diff --git a/src/authz-module/components/AuthZTitle.tsx b/src/authz-module/components/AuthZTitle.tsx
index 229c8cb6..e69fd876 100644
--- a/src/authz-module/components/AuthZTitle.tsx
+++ b/src/authz-module/components/AuthZTitle.tsx
@@ -3,7 +3,7 @@ import {
 } from 'react';
 import { Link } from 'react-router-dom';
 import {
-  Breadcrumb, Col, Container, Row, Button,
+  Breadcrumb, Col, Row, Button,
   Stack,
   useMediaQuery,
   breakpoints,
@@ -23,7 +23,7 @@ interface Action {
 export interface AuthZTitleProps {
   activeLabel?: string;
   pageTitle: string;
-  pageSubtitle: string | ReactNode;
+  pageSubtitle?: string | ReactNode;
   navLinks?: BreadcrumbLink[];
   actions?: (Action | ReactNode)[];
 }
@@ -42,7 +42,7 @@ const AuthZTitle = ({
 }: AuthZTitleProps) => {
   const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
   return (
-    <Container className="p-5 bg-light-100">
+    <div className="page-band py-5 bg-light-100">
       <Breadcrumb
         linkAs={Link}
         links={navLinks}
@@ -52,9 +52,14 @@ const AuthZTitle = ({
         <Col xs={12} md={7} className="mb-4">
           <div className="d-flex align-items-center flex-column-sm">
             <h2 className="text-primary mb-0">{pageTitle}</h2>
-            {typeof pageSubtitle === 'string'
-              ? <> { pageSubtitle !== '' && <hr className="mx-lg-3" /> }<h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3></>
-              : <>{ pageSubtitle !== '' && <hr className="mx-lg-3" /> } <div className="mb-0">{pageSubtitle}</div></>}
+            {pageSubtitle && (
+              <>
+                <hr className="authz-action-divider mx-lg-3" />
+                {typeof pageSubtitle === 'string'
+                  ? <h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3>
+                  : <div className="mb-0">{pageSubtitle}</div>}
+              </>
+            )}
 
           </div>
         </Col>
@@ -72,7 +77,7 @@ const AuthZTitle = ({
                   <Fragment key={`authz-header-action-${key}`}>
                     {content}
                     {(index === actions.length - 1) ? null
-                      : (<hr className="mx-lg-5" />)}
+                      : (<hr className="authz-action-divider mx-lg-5" />)}
                   </Fragment>
                 );
               })
@@ -80,7 +85,7 @@ const AuthZTitle = ({
           </Stack>
         </Col>
       </Row>
-    </Container>
+    </div>
   );
 };
 
diff --git a/src/authz-module/components/PermissionTable.tsx b/src/authz-module/components/PermissionTable.tsx
index e2e7f619..4f1bb859 100644
--- a/src/authz-module/components/PermissionTable.tsx
+++ b/src/authz-module/components/PermissionTable.tsx
@@ -18,7 +18,10 @@ interface PermissionTableProps {
 const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProps) => {
   const { formatMessage } = useIntl();
   return (
-    <Card>
+    // Only the narrowest viewports are too small for the matrix, so the card scrolls there
+    // (see `.permission-table-scroll`). Above that it is not a scroll container, which is
+    // what lets the header row stick to the viewport as the page scrolls.
+    <Card className="permission-table-scroll">
       <table className="permission-table w-100">
         <thead>
           <tr>
diff --git a/src/authz-module/index.scss b/src/authz-module/index.scss
index 99586edd..856af828 100644
--- a/src/authz-module/index.scss
+++ b/src/authz-module/index.scss
@@ -24,16 +24,12 @@
     min-height: 700px;
   }
 
-  hr {
+  .authz-action-divider {
     border-right: var(--pgn-size-border-width) solid var(--pgn-color-border);
     height: var(--height-action-divider);
     width: 0;
   }
 
-  .tab-content {
-    background-color: var(--pgn-color-light-200);
-  }
-
   .collapsible-card {
     border: none;
 
@@ -66,12 +62,23 @@
       line-height: 24px;
     }
   }
+
+  // Paragon's `.overflow-auto` lives in the `paragon` cascade layer, where its `!important`
+  // outranks anything this layer can say, so the card carries its own class instead. The
+  // matrix is 432px at min-content: only the narrowest screens need the card to scroll, and
+  // the cap is what gives the sticky header something to stick to while it is the scroller.
+  @media (--pgn-size-breakpoint-max-width-xs) {
+    .permission-table-scroll {
+      overflow: auto;
+      max-height: 80vh;
+    }
+  }
   
   @media(--pgn-size-breakpoint-max-width-sm){
     .flex-column-sm {
       flex-direction: column;
     }
-    hr {
+    .authz-action-divider {
       border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
       border-right: none;
       width: 100%;
@@ -126,6 +133,3 @@
   max-height: 500px;
 }
 
-.scope-search-input {
-  width: 18.75rem; // 300px
-}
diff --git a/src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx b/src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx
index bcd1eecf..0b60a570 100644
--- a/src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx
+++ b/src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx
@@ -158,7 +158,7 @@ const AssignRoleWizard = ({
     <Stepper activeKey={activeStep}>
       <Stepper.Header className="bg-info-100" />
 
-      <div className="bg-light-200 p-5">
+      <div className="page-band py-5">
         <Stepper.Step
           eventKey={STEPS.SELECT_USERS_AND_ROLE}
           title={intl.formatMessage(messages['wizard.step.selectUsersAndRole.title'])}
@@ -191,7 +191,7 @@ const AssignRoleWizard = ({
         </Stepper.Step>
       </div>
 
-      <div className="p-5">
+      <div className="page-band py-5">
         <Stepper.ActionRow eventKey={STEPS.SELECT_USERS_AND_ROLE}>
           <Button variant="outline-primary" onClick={handleClose}>
             {intl.formatMessage(messages['wizard.button.cancel'])}
diff --git a/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx b/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
index f618f103..d99659f1 100644
--- a/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
+++ b/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
@@ -39,11 +39,9 @@ const AssignRoleWizardPage = () => {
 
   return (
     <AuthZLayout
-      context={{ id: '', title: '', org: '' }}
       navLinks={[{ label: intl.formatMessage(messages['wizard.page.breadcrumb']), to: returnTo }]}
       activeLabel={intl.formatMessage(messages['wizard.page.title'])}
       pageTitle={intl.formatMessage(messages['wizard.page.title'])}
-      pageSubtitle=""
       actions={[]}
     >
       <AssignRoleWizard
diff --git a/src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx b/src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx
index 1a0b41c0..64a989a9 100644
--- a/src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx
+++ b/src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx
@@ -33,18 +33,16 @@ const ScopeFilterBar = ({
   return (
     <>
       <div className="d-flex align-items-center justify-content-between gap-3 mb-2 flex-wrap">
-        <div className="d-flex align-items-center gap-3">
-          <div className="scope-search-input">
-            <Form.Group controlId="scope-search" className="mb-0">
-              <Form.Control
-                type="text"
-                value={search}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
-                placeholder={intl.formatMessage(messages['wizard.step2.search.placeholder'])}
-                trailingElement={<Icon src={Search} />}
-              />
-            </Form.Group>
-          </div>
+        <div className="d-flex align-items-center gap-3 flex-wrap">
+          <Form.Group controlId="scope-search" className="mb-0">
+            <Form.Control
+              type="text"
+              value={search}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+              placeholder={intl.formatMessage(messages['wizard.step2.search.placeholder'])}
+              trailingElement={<Icon src={Search} />}
+            />
+          </Form.Group>
 
           <OrgFilter
             filterButtonText={intl.formatMessage(messages['wizard.step2.filter.org.label'])}
diff --git a/src/authz-module/roles-permissions/RolesPermissions.tsx b/src/authz-module/roles-permissions/RolesPermissions.tsx
index 676a9f22..e72a373d 100644
--- a/src/authz-module/roles-permissions/RolesPermissions.tsx
+++ b/src/authz-module/roles-permissions/RolesPermissions.tsx
@@ -51,7 +51,7 @@ const RolesPermissions = () => {
   }, [intl]);
 
   return (
-    <Container className="p-5">
+    <>
       <Container className="pb-5">
         <ButtonGroup size="lg" className="mb-2">
           <Button
@@ -81,14 +81,14 @@ const RolesPermissions = () => {
             className="mt-5"
           >
             <div className="row align-items-center">
-              <div className="col col-7">
+              <div className="col-12 col-md-7">
                 <p className="text-primary font-weight-bold h4">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.title'])}</p>
                 <span>
                   <span className="font-weight-bold">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.note'])}</span>
                   {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.description'])}
                 </span>
               </div>
-              <div className="col col-5">
+              <div className="col-12 col-md-5 mt-3 mt-md-0">
                 <Hyperlink className="d-block text-right h5 font-weight-normal" destination="https://docs.openedx.org/en/latest/educators/references/course_development/course_team_roles.html" target="_blank" showLaunchIcon={false} isInline>
                   {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.link'])}
                 </Hyperlink>
@@ -106,7 +106,7 @@ const RolesPermissions = () => {
         />
       )}
       <AnchorButton />
-    </Container>
+    </>
   );
 };
 
diff --git a/src/authz-module/team-members/TeamMembersTable.tsx b/src/authz-module/team-members/TeamMembersTable.tsx
index 6f6d73c6..b4b30a36 100644
--- a/src/authz-module/team-members/TeamMembersTable.tsx
+++ b/src/authz-module/team-members/TeamMembersTable.tsx
@@ -78,81 +78,79 @@ const TeamMembersTable = ({ presetScope }: TeamMembersTableProps) => {
   useEffect(() => () => fetchData.cancel(), [fetchData]);
 
   return (
-    <div className="authz-module">
-      <DataTable
-        isFilterable
-        isPaginated
-        isSortable
-        manualFilters
-        manualPagination
-        manualSortBy
-        numBreakoutFilters={4}
-        fetchData={fetchData}
-        data={roleAssignments}
-        itemCount={count}
-        pageCount={pageCount}
-        initialState={{ pageSize: TABLE_DEFAULT_PAGE_SIZE, filters: initialFilters }}
-        isLoading={isLoadingAllRoleAssignments}
-        additionalColumns={[
+    <DataTable
+      isFilterable
+      isPaginated
+      isSortable
+      manualFilters
+      manualPagination
+      manualSortBy
+      numBreakoutFilters={4}
+      fetchData={fetchData}
+      data={roleAssignments}
+      itemCount={count}
+      pageCount={pageCount}
+      initialState={{ pageSize: TABLE_DEFAULT_PAGE_SIZE, filters: initialFilters }}
+      isLoading={isLoadingAllRoleAssignments}
+      additionalColumns={[
+        {
+          id: 'action',
+          Header: intl.formatMessage(messages['authz.team.members.table.column.actions.title']),
+          Cell: viewActionCell,
+        },
+      ]}
+      columns={
+        [
           {
-            id: 'action',
-            Header: intl.formatMessage(messages['authz.team.members.table.column.actions.title']),
-            Cell: viewActionCell,
+            id: 'username',
+            Header: intl.formatMessage(messages['authz.team.members.table.column.name.title']),
+            accessor: 'username',
+            Cell: NameCell,
+            filter: 'text',
+            Filter: TextFilter,
+            filterOrder: 1,
           },
-        ]}
-        columns={
-          [
-            {
-              id: 'username',
-              Header: intl.formatMessage(messages['authz.team.members.table.column.name.title']),
-              accessor: 'username',
-              Cell: NameCell,
-              filter: 'text',
-              Filter: TextFilter,
-              filterOrder: 1,
-            },
-            {
-              Header: intl.formatMessage(messages['authz.team.members.table.column.email.title']),
-              accessor: 'email',
-              disableFilters: true,
-              filter: 'text',
-              Filter: TextFilter,
-            },
-            {
-              Header: getCellHeader('org', intl.formatMessage(messages['authz.team.members.table.column.organization.title']), columnsWithFiltersApplied),
-              accessor: 'org',
-              Cell: OrgCell,
-              filter: 'includesValue',
-              Filter: OrgFilter,
-              filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.organization.title']),
-              filterOrder: 2,
-            },
-            {
-              Header: getCellHeader('scope', intl.formatMessage(messages['authz.team.members.table.column.scope.title']), columnsWithFiltersApplied),
-              accessor: 'scope',
-              Cell: ScopeCell,
-              filter: 'includesValue',
-              Filter: ScopesFilter,
-              filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.scope.title']),
-              filterOrder: 4,
-            },
-            {
-              Header: getCellHeader('role', intl.formatMessage(messages['authz.team.members.table.column.role.title']), columnsWithFiltersApplied),
-              accessor: 'role',
-              filter: 'includesValue',
-              Cell: RoleCell,
-              Filter: RolesFilter,
-              filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.role.title']),
-              filterOrder: 3,
-            },
-          ]
-        }
-      >
-        <TableControlBar onFilterChange={setColumnsWithFiltersApplied} />
-        <DataTable.Table />
-        <TableFooter />
-      </DataTable>
-    </div>
+          {
+            Header: intl.formatMessage(messages['authz.team.members.table.column.email.title']),
+            accessor: 'email',
+            disableFilters: true,
+            filter: 'text',
+            Filter: TextFilter,
+          },
+          {
+            Header: getCellHeader('org', intl.formatMessage(messages['authz.team.members.table.column.organization.title']), columnsWithFiltersApplied),
+            accessor: 'org',
+            Cell: OrgCell,
+            filter: 'includesValue',
+            Filter: OrgFilter,
+            filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.organization.title']),
+            filterOrder: 2,
+          },
+          {
+            Header: getCellHeader('scope', intl.formatMessage(messages['authz.team.members.table.column.scope.title']), columnsWithFiltersApplied),
+            accessor: 'scope',
+            Cell: ScopeCell,
+            filter: 'includesValue',
+            Filter: ScopesFilter,
+            filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.scope.title']),
+            filterOrder: 4,
+          },
+          {
+            Header: getCellHeader('role', intl.formatMessage(messages['authz.team.members.table.column.role.title']), columnsWithFiltersApplied),
+            accessor: 'role',
+            filter: 'includesValue',
+            Cell: RoleCell,
+            Filter: RolesFilter,
+            filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.role.title']),
+            filterOrder: 3,
+          },
+        ]
+      }
+    >
+      <TableControlBar onFilterChange={setColumnsWithFiltersApplied} />
+      <DataTable.Table />
+      <TableFooter />
+    </DataTable>
   );
 };
 
diff --git a/src/style.scss b/src/style.scss
index a87e0997..9fc58550 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,5 +1,22 @@
-// App-scoped runtime styles for the toast manager. Global selectors, so
-// they must not live under any component's scoped stylesheet.
+// App-scoped global styles. Global selectors, so they must not live under any
+// component's scoped stylesheet.
+
+// Lines content up with the site header (`Container fluid size="xl"`) while the element
+// itself stays full width, so a background it carries still bleeds to the edges.
+// The overhang is measured from the element's own width, so it has to span the viewport:
+// inside a constrained box it collapses to zero. Use `py-*` for vertical padding; `p-*`
+// sets the `padding` shorthand `!important`, which wipes out the horizontal inset.
+.page-band {
+  --page-band-overhang: max(
+    0px,
+    (100% - var(--pgn-size-container-max-width-xl) - var(--pgn-spacing-grid-gutter-width)) / 2
+  );
+
+  padding-left: calc(var(--page-band-overhang) + var(--pgn-spacing-spacer-5));
+  padding-right: calc(var(--page-band-overhang) + var(--pgn-spacing-spacer-5));
+}
+
+// Runtime styles for the toast manager.
 .toast-container {
   // Ensure toast appears above modal
   z-index: 1000;