update grid area and margins to align the container branding with card edges from tablet

Author: cemms1

dotcom-rendering/src/components/FrontSection.tsx

@@ -497,6 +497,16 @@ const labsSectionHeaderStyles = css`
 
 const sponsoredContentLabelWrapper = css`
 	grid-row: bottom-content;
+	grid-column: content;
+
+	margin: ${space[1]}px 0 0;
+	${from.tablet} {
+		/*
+		* side margins of 10px due to the -10px margins on the
+		* grid area for content, to align with the card edges
+		*/
+		margin: ${space[1]}px 10px 0;
+	}
 `;
 
 /**
@@ -815,6 +825,7 @@ export const FrontSection = ({
 							/>
 						</Island>
 					) : null}
+
 					{isLabs &&
 						collectionBranding?.kind === 'paid-content' &&
 						!collectionBranding.hasMultipleBranding && (
@@ -831,6 +842,7 @@ export const FrontSection = ({
 								/>
 							</div>
 						)}
+
 					{pagination && (
 						<FrontPagination
 							sectionName={pagination.sectionName}