diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx
index f2fe0a2bf31f..002ca0182c44 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx
@@ -1,8 +1,10 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
 import { useCallback } from 'react';
 import { FullWidthSeparator } from '../full-width-separator';
+import parentStyles from '../styles.module.scss';
 import { HelpCards } from './cards';
 import { HelpFooter } from './footer';
 import styles from './styles.module.scss';
@@ -21,33 +23,46 @@ export function HelpContent() {
 	}, [ trackHelpRequest ] );
 
 	return (
-		<section>
-			<h2>{ __( 'Need assistance?', 'jetpack-my-jetpack' ) }</h2>
-			<p className={ styles.description }>
-				{ __(
-					'Browse our expert guides to get help with setup, features, and troubleshooting.',
-					'jetpack-my-jetpack'
+		<>
+			<section
+				className={ clsx(
+					parentStyles[ 'constrained-section' ],
+					parentStyles[ 'tab-content-wrapper' ]
 				) }
-			</p>
-			<Button
-				variant="primary"
-				href={ getRedirectUrl( 'jetpack-support' ) }
-				target="_blank"
-				rel="noopener noreferrer"
-				className={ styles.cta }
-				onClick={ handleExploreHelpCenterClick }
 			>
-				<span>
-					{ __( 'Explore our Help Center', 'jetpack-my-jetpack' ) }
-					<span role="presentation" aria-hidden="true">
-						&nbsp;
-						{ '↗' }
+				<h2>{ __( 'Need assistance?', 'jetpack-my-jetpack' ) }</h2>
+				<p className={ styles.description }>
+					{ __(
+						'Browse our expert guides to get help with setup, features, and troubleshooting.',
+						'jetpack-my-jetpack'
+					) }
+				</p>
+				<Button
+					variant="primary"
+					href={ getRedirectUrl( 'jetpack-support' ) }
+					target="_blank"
+					rel="noopener noreferrer"
+					className={ styles.cta }
+					onClick={ handleExploreHelpCenterClick }
+				>
+					<span>
+						{ __( 'Explore our Help Center', 'jetpack-my-jetpack' ) }
+						<span role="presentation" aria-hidden="true">
+							&nbsp;
+							{ '↗' }
+						</span>
 					</span>
-				</span>
-			</Button>
-			<HelpCards />
+				</Button>
+				<HelpCards />
+			</section>
+
 			<FullWidthSeparator />
-			<HelpFooter />
-		</section>
+
+			<div className={ styles.footer }>
+				<div className={ clsx( parentStyles[ 'constrained-section' ], styles[ 'footer-inner' ] ) }>
+					<HelpFooter />
+				</div>
+			</div>
+		</>
 	);
 }
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss
index 1dc10c01469d..210d230f848e 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss
@@ -1,5 +1,4 @@
 @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
-@use "../styles.module.scss" as parent;
 
 .description {
 	font-size: 1rem;
@@ -32,24 +31,9 @@
 }
 
 .footer {
-	width: 100vw;
-	margin-inline-start: calc(-50vw + 50%);
+	width: 100%;
 	background: var(--studio-white, #fff);
 
-	/* Center the content within the full-width background */
-	display: flex;
-	justify-content: center;
-
-	// 1128 + 3rem (96px) = 1224px + 64px (no idea what that is) = 1288px
-	@media (max-width: 1288px) {
-		// I have to hardcode --max-container-width because
-		// media queries don't work with CSS variables
-		margin-inline-start: -3rem; // Match the parent's padding-inline
-		margin-inline-end: -3rem;
-		width: calc(100% + 6rem); // Compensate for the negative margins
-		padding-inline: 3rem;
-	}
-
 	section {
 		max-width: 35rem;
 	}
@@ -65,14 +49,6 @@
 .footer-inner {
 	padding-top: 2.5rem;
 	padding-bottom: 1.5rem;
-	width: 100%;
-	padding-inline: 3rem;
-
-	@include parent.full-width-container;
-
-	@media ( max-width: 1288px ) {
-		padding-inline: 0;
-	}
 }
 
 .footer-learn-more {
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx
index d7528a6b0612..175886b81b4b 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx
@@ -1,9 +1,11 @@
 import { Col, Container } from '@automattic/jetpack-components';
 import { currentUserCan } from '@automattic/jetpack-script-data';
+import clsx from 'clsx';
 import ConnectionsSection from '../../connections-section';
 import PlansSection from '../../plans-section';
 import ProductCardsSection from '../../product-cards-section';
 import { FullWidthSeparator } from '../full-width-separator';
+import parentStyles from '../styles.module.scss';
 import { A4AUpsell } from './a4a-upsell';
 import styles from './styles.module.scss';
 
@@ -14,21 +16,28 @@ import styles from './styles.module.scss';
  */
 export function OverviewContent() {
 	return (
-		<div>
-			<div className={ styles.products }>
-				<ProductCardsSection />
-			</div>
-
-			{ currentUserCan( 'manage_options' ) ? (
-				<div className={ styles[ 'jetpack-manage-upsell' ] }>
-					<A4AUpsell />
+		<>
+			<div
+				className={ clsx(
+					parentStyles[ 'constrained-section' ],
+					parentStyles[ 'tab-content-wrapper' ]
+				) }
+			>
+				<div className={ styles.products }>
+					<ProductCardsSection />
 				</div>
-			) : null }
+
+				{ currentUserCan( 'manage_options' ) ? (
+					<div className={ styles[ 'jetpack-manage-upsell' ] }>
+						<A4AUpsell />
+					</div>
+				) : null }
+			</div>
 
 			<FullWidthSeparator />
+
 			<div className={ styles.footer }>
-				{ /* Needed to show different background colour */ }
-				<div className={ styles[ 'footer-inner' ] }>
+				<div className={ clsx( parentStyles[ 'constrained-section' ], styles[ 'footer-inner' ] ) }>
 					<Container horizontalSpacing={ 0 } className={ styles[ 'footer-container' ] }>
 						<Col sm={ 4 } md={ 4 } lg={ 6 }>
 							<PlansSection />
@@ -39,6 +48,6 @@ export function OverviewContent() {
 					</Container>
 				</div>
 			</div>
-		</div>
+		</>
 	);
 }
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/styles.module.scss
index 936091413648..83840923ae4c 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/styles.module.scss
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/styles.module.scss
@@ -1,6 +1,3 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
-@use "../styles.module.scss" as parent;
-
 .products {
 	margin-bottom: 3rem;
 }
@@ -10,33 +7,13 @@
 }
 
 .footer {
-	width: 100vw;
-	margin-inline-start: calc(-50vw + 50%);
+	width: 100%;
 	background: var(--studio-white, #fff);
-
-	/* Center the content within the full-width background */
-	display: flex;
-	justify-content: center;
-
-	// 1128 + 3rem (96px) = 1224px + 64px (no idea what that is) = 1288px
-	@media ( max-width: 1288px ) {
-		// I have to hardcode --max-container-width
-		// because media queries don't work with CSS variables
-		margin-inline-start: -3rem; // Match the parent's padding-inline
-		margin-inline-end: -3rem;
-		width: calc(100% + 6rem); // Compensate for the negative margins
-		padding-inline: 3rem;
-	}
 }
 
 .footer-inner {
 	padding-top: 2.5rem;
 	padding-bottom: 1.5rem;
-	margin: 0 auto;
-	width: 100%;
-	padding-inline: 3rem;
-
-	@include parent.full-width-container;
 
 	a,
 	a.components-external-link,
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/content.tsx
index 493c2bc8c5d3..db0bcbeab2a5 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/content.tsx
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/content.tsx
@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
+import parentStyles from '../styles.module.scss';
 import { Products } from './products';
 import styles from './styles.module.scss';
 
@@ -10,7 +11,14 @@ import styles from './styles.module.scss';
  */
 const ProductsContent = () => {
 	return (
-		<section className={ clsx( styles.content, styles[ 'my-jetpack-products-tab__content' ] ) }>
+		<section
+			className={ clsx(
+				parentStyles[ 'constrained-section' ],
+				parentStyles[ 'tab-content-wrapper' ],
+				styles.content,
+				styles[ 'my-jetpack-products-tab__content' ]
+			) }
+		>
 			<h2>{ __( 'Products', 'jetpack-my-jetpack' ) }</h2>
 			<p className={ styles.description }>
 				{ __(
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss
index 2d60e2ba5aff..3045a3762c42 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss
@@ -17,13 +17,23 @@
 	}
 }
 
-.tab-content-wrapper {
-	padding-block-start: 2.5rem;
+@mixin full-width-container {
+	max-width: var(--max-container-width);
+	margin: 0 auto;
+}
+
+.constrained-section {
+
+	@include full-width-container;
 	padding-inline: 3rem;
 
 	@media (max-width: gb.$break-medium ) {
 		padding-inline: 1.5rem;
 	}
+}
+
+.tab-content-wrapper {
+	padding-block-start: 2.5rem;
 
 	h2 {
 
@@ -35,15 +45,7 @@
 
 .full-width-separator {
 	border-top: 1px solid var(--jp-gray);
-	width: 100vw;
-	position: relative;
-	inset-inline-start: 50%;
-	margin-inline-start: -50vw;
-}
-
-@mixin full-width-container {
-	max-width: var(--max-container-width);
-	margin: 0 auto;
+	width: 100%;
 }
 
 .my-jetpack-tab-panel--full-width {
@@ -64,10 +66,5 @@
 
 	:global(.components-tab-panel__tab-content) {
 		background-color: #fcfcfc;
-
-		.my-jetpack-tab-panel-inner {
-
-			@include full-width-container;
-		}
 	}
 }
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx
index 26e03d77f069..0d6978ad3d76 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx
@@ -1,8 +1,6 @@
-import clsx from 'clsx';
 import { HelpContent } from './help/content';
 import { OverviewContent } from './overview/content';
 import { ProductsContent } from './products/content';
-import styles from './styles.module.scss';
 import { MyJetpackSection } from './types';
 import type { ComponentType } from 'react';
 
@@ -30,11 +28,5 @@ export function TabContent( { name }: TabContentProps ) {
 		return null;
 	}
 
-	return (
-		<div className={ styles[ 'my-jetpack-tab-panel-inner' ] }>
-			<div className={ clsx( styles[ 'tab-content-wrapper' ] ) }>
-				<ContentComponent />
-			</div>
-		</div>
-	);
+	return <ContentComponent />;
 }
diff --git a/projects/packages/my-jetpack/_inc/style.module.scss b/projects/packages/my-jetpack/_inc/style.module.scss
index 4460bbb2d413..955abb293e1a 100644
--- a/projects/packages/my-jetpack/_inc/style.module.scss
+++ b/projects/packages/my-jetpack/_inc/style.module.scss
@@ -1,5 +1,12 @@
+@use "@automattic/jetpack-base-styles/admin-page-layout" as *;
+
 :global {
 
+	body.jetpack_page_my-jetpack {
+
+		@include jetpack-admin-page-layout;
+	}
+
 	// Hello Dolly compatibility fix
 	body.jetpack_page_my-jetpack p#dolly {
 		position: absolute;
diff --git a/projects/packages/my-jetpack/changelog/adopt-admin-page-layout-mixin b/projects/packages/my-jetpack/changelog/adopt-admin-page-layout-mixin
new file mode 100644
index 000000000000..d6c52488d628
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/adopt-admin-page-layout-mixin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+My Jetpack: Adopt jetpack-admin-page-layout mixin.
diff --git a/projects/packages/my-jetpack/changelog/fix-tab-panel-full-width-elements b/projects/packages/my-jetpack/changelog/fix-tab-panel-full-width-elements
new file mode 100644
index 000000000000..aa87e8e33132
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/fix-tab-panel-full-width-elements
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+My Jetpack: restructure tab panel so full-width separators and footers no longer rely on viewport-width math, eliminating the horizontal scrollbar that appeared when the page scrollbar was present.