diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
index 16c676c57d8..75d05d935d8 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
@@ -888,16 +888,23 @@ const styles = {
 	bannerVisualContainer: css`
 		grid-area: main-image;
 
-		margin-left: ${space[2]}px;
-		margin-right: ${space[2]}px;
+		margin: 0;
+		padding: 0;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 
 		${from.phablet} {
 			max-width: ${phabletContentMaxWidth};
 			justify-self: center;
 		}
+		${from.tablet} {
+			width: 100%;
+		}
 		${from.desktop} {
-			margin-top: ${space[6]}px;
-			padding-left: ${space[2]}px;
+			margin: ${space[6]}px 0;
 			justify-self: end;
 		}
 		${between.desktop.and.wide} {
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
index bbb775ca593..ce948640820 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
@@ -178,16 +178,23 @@ const styles = {
 	bannerVisualContainer: css`
 		grid-area: main-image;
 
-		margin-left: ${space[2]}px;
-		margin-right: ${space[2]}px;
+		margin: 0;
+		padding: 0;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 
 		${from.phablet} {
 			max-width: ${phabletContentMaxWidth};
 			justify-self: center;
 		}
+		${from.tablet} {
+			width: 100%;
+		}
 		${from.desktop} {
-			margin-top: ${space[6]}px;
-			padding-left: ${space[2]}px;
+			margin: ${space[6]}px 0;
 			justify-self: end;
 		}
 		${between.desktop.and.wide} {
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
index eb8d01f3bb8..35aa765fd79 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
@@ -45,16 +45,23 @@ const getStyles = (isHeaderImage = false) => {
 		container: css`
 			grid-area: main-image;
 
-			margin-left: ${space[2]}px;
-			margin-right: ${space[2]}px;
+			margin: 0;
+			padding: 0;
+
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
 
 			${from.phablet} {
 				max-width: 492px;
 				justify-self: center;
 			}
+			${from.tablet} {
+				width: 100%;
+			}
 			${from.desktop} {
-				margin-top: ${space[6]}px;
-				padding-left: ${space[2]}px;
+				margin: ${space[6]}px 0;
 				justify-self: end;
 			}
 			${between.desktop.and.wide} {
@@ -79,12 +86,6 @@ const getStyles = (isHeaderImage = false) => {
 					padding-bottom: 0;
 				}
 			}
-
-			${from.tablet} {
-				height: 100%;
-				width: 100%;
-				align-items: center;
-			}
 		`,
 	};
 };