Hello, I am nearly finished with composing this email, but an issue has arisen on mobile where the header is not stretching to full width. My goal is to make the header image fill the entire width of the screen on a mobile device, but I keep encountering obstacles that prevent it from doing so. Despite my efforts, the header only partially extends above the text. CSS cannot be used externally since this template is for an email, thus requiring all styles to be included inline. How can I achieve a full-width and centered header for mobile devices?
UPDATE: Upon posting this query, I also realized that the desktop version does not have full width. . .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,400;0,600;0,700;0,725;0,800;0,900;1,300;1,800;1,900&display=swap" rel="stylesheet">
<title>NASCAR Fan Email</title>
</head>
<body style="margin: 0; padding: 0; background: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/13/NASCAR_FanCouncil_NewsletterExample_02X-1_Background-scaled.jpg') no-repeat center center fixed; -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; font-family: 'Saira', sans-serif;">
<table class="outer" style="margin: 0 auto; border:0; border-spacing: 0; align-items: center;
font-family: Stainless-Bold; color: black; width: 100%;">
<tr>
<td style="padding: 0;">
<table style=" border-spacing: 0; width: 100%; border:0;">
<tr>
<td class="fanCouncil" style=" text-align: center; width: 100%;">
<img src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/13/NASCAR_FanCouncil_NewsletterExample_02X-1_Header-scaled.jpg" alt="Fan Email" width="100%">
</td>
</tr>
</table>
</td>
</tr>
<table style="border:0;">
<tr>
<td class=" photoText " style="position: absolute; top: 600px; left: 130px;">
<p style="
line-height: 2.2;
max-width: 1200px;
font-size: 40px; font-family: 'Saira', sans-serif;" class=" entryText ">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!
</p>
<a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" clickStart " style=" font-size: 40px; font-weight: 1000;
text-transform: uppercase;
text-decoration: none; color: black;">Click here to Start </a>
<p style="
line-height: 2.2;
max-width: 1200px;
font-size: 40px; font-family: 'Saira', sans-serif;" class=" unableText "> If you are unable to click the link, please copy and paste the full URL below into your browser:</p>
<a style=" font-size: 40px; color: black; font-family: 'Saira', sans-serif;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" copyLink ">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J</a>
<p style="line-height: 2.2; max-width: 1200px; font-size: 40px; font-family: 'Saira', sans-serif;" class=" thankYou ">Thank you!<br>Official NASCAR Fan Council</p>
</td>
</tr>
</table>
</table>
</body>
</html>