HTML 响应式电子邮件 - table 不遵守最大宽度：100%
HTML responsive email - table not adhering to max-width:100%
我正在学习如何使用媒体查询来编码响应式 HTML 电子邮件并且正在努力。我在 Really Good Emails (http://email.reallygoodemails.com/t/ViewEmail/i/5F9007F241DBA1802540EF23F30FEDED/5F41B898D731AECE2A1BF84ACBDD178B) 找到了一个很棒的电子邮件模板，并尝试从头开始编写代码。我能够获得桌面版本，但是在添加媒体查询时，我无法让中间部分 (.buttons) 遵守 100% 的最大宽度。
我在这里做错了什么？我相信其他人也在为此苦苦挣扎。我尝试使用我在 Litmus 上阅读的仅限表格的方法。
HTML 下面。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Really Good Emails</title>
<style type="text/css">
body {
background-color:#f7f7f7;
color:#5f5f5f;
font-family: Roboto,Tahoma,sans-serif;
}
h1 {
color:#404040;
}
.header {
background-image: url("http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/email-background2.jpg");
border-spacing: 0px;
border-collapse: collapse;
padding-bottom:0px;
}
a {
text-decoration:none;
display: block;
}
.btn {
opacity:1;
}
.btn:hover {
opacity:.8;
}
@media only screen and (max-width:510px) {
body {max-width: 100% !important;padding:0 !important;margin:0 !important;}
.header {max-width: 100% !important; padding:0 !important;margin:0 !important;}
.header img {width:300px !important;height:auto !important;}
.friday {max-width:100% !important;display:flex;align-items: center;}
.friday img {max-width:100% !important;height:auto !important;}
.advertise img {max-width:100% !important;height:auto !important;}
.buttons span {max-width: 100% !important;padding: 5px !important;}
.buttonsintro {max-width:100% !important;}
.buttons {max-width:100% !important;}
.buttons a {max-width:100% !important; padding: 10px 5px 10px 5px !important;}
.buttons h1,p {max-width:100% !important; padding: 10px 5px 10px 5px !important}
.advertise {max-width:100% !important;}
.friday h1 {padding: 0 0 0 15px !important;}
.curved {display:none !important;}
p {font-size:1rem !important;}
td {max-width: 100% !important;}
.footer {max-width: 100% !important;padding:5px 10px 0px 10px !important;}
.footer p {font-size:.8rem !important;}
.cliff1 {max-width:100% !important;}
.cliff2 {max-width:100% !important;display:block !important;}
.cliff2 td {margin:0px !important;}
.space {display:none !important;}
}
</style>
</head>
<body>
<table class="header" width="100%" bgcolor="#fe4c44" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 25px 0 25px 0; display:block;" align="center">
<a href="https://reallygoodemails.com/?utm_campaign=complete-your-profile&utm_source=ReallyGoodEmails&utm_medium=email">
<img style="display:block;" width="600px" height="64px" alt="Really Good Emails" src="http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/header_RGE-logo-9900000000079e3c.png">
</a>
</td>
</tr>
<tr>
<td style="width:600px;" align="center">
<img class="curved" style="display:block; max-width:600px;" width="600px" height="32px" src="http://i2.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/top-rounded3-9900000000079e3c.png">
</td>
</tr>
</table>
<table class="friday" align="center" width="600px" bgcolor="white">
<tr>
<td align="center" color="#5f5f5f;"><img width="560px" height="398px" alt="Feedback Friday"
src="http://i3.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/feedback-compressed-9900000000079e3c.png">
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">Template Eyes</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">Not all pre-built email templates are created equal. Some are born with looks so dreamy that you hardly need to change a thing. Others, as we will see in today's Feedback Friday, may need some work done on them but can walk a line of being overdone - kind of like a movie star who gets too much plastic surgery.
</p>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">This week we jump into a recently submitted B2B email to discuss where you can go wrong in those kinds of scenarios. (For clarity, we are talking about email template scenarios, not plastic surgery scenarios.)
</p>
</td>
</tr>
<tr>
<td>
<a style="color:white; text-decoration: none;" href="https://www.fadavis.com"><table class="btn" style="margin-top:25px; margin-left:15px; border-radius:5px;" align="left" bgcolor="#fe4c44">
<tr>
<td style="color:white;padding:10px 15px 10px 15px; font-size:.81rem; line-height:25px;" align="center">
<strong>BE WISE & CUSTOMIZE</strong>
</td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px" src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="advertise" align="center" width="600px" bgcolor="#f7f7f7">
<tr>
<td style="padding:20px 0 20px 0; font-size:.7rem;" align="center">This email is supported by:</td>
</tr>
<tr>
<td class="advertise" style="padding-bottom:35px;" align="center"><img width="560px" src="http://i5.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/ReallyGoodEmail_Banner_Animation_BlueBG_V1_L1R5-9900000000079e3c.gif">
</td>
</tr>
</table>
<table class="buttonsintro" align="center" width="600px" bgcolor="white">
<tr>
<td>
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">
Inspiring Stuff</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">
Here's what got us up in a state of mind surfing this week:</p>
</td>
</tr>
</table>
<table class="buttons" align="center" width="600px" bgcolor="white">
<tr>
<td class="btn" align="center"style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;padding: 12px 18px;
text-decoration: none; text-decoration: none;border-radius: 3px;
border: 1px solid red;">
<strong> SHOULD BUTTONS BE ROUNDED OR SQUARE?</strong></a></span></td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td class="btn" align="center" style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red;display: inline-block;">
<strong>⬛ WHAT'S THIS GONNA LOOK LIKE IN DARK MODE?</strong></a></span>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="margin-bottom:25px; border-radius: 3px;" bgcolor="white">
<a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;">
<strong> THE DESIGN SPRINT CHALLENGE OF NICK BRITO</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;"><strong> PRESENTING CONFLICTING OPTIONS IN EMAIL</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; max-width:80%; display: inline-block;"><strong> COLORFUL GRADIENT CARDS</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px"
src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="cliff1" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td>
<h2 style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="center">Follow Us off the Cliff</h2>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1rem;" color="#5f5f5f;" align="center">
We know what your mother said. If Really Good Emails jumped off a cliff would you go with them? Yes, of course you would. Don’t be silly.</p>
</td>
</tr>
</table>
<table class="cliff2" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="#38A1F3">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius:4px; display: inline"><strong>TWITTER</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px;border-radius: 4px;" bgcolor="#C92228">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px; display: inline"><strong>PINTEREST</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="black">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px;
display: inline"><strong>CODEPEN</strong></a></span>
</td>
<tr>
<td class="space" style="line-height:30px;"> </td>
</tr>
</table>
<table style="padding: 25px 0 25px 0" align="center" width="100%" bgcolor="white">
<tr>
<td align="center">
<h3>Design Better. Spam Never.</h3>
<p>Update Subscription - Articles & Interviews - Free Resources - View Online</p>
</td>
</table>
<table class="footer" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td style="color:#9a9ca0; font-size:.7rem; line-height:20px;padding-top:20px;"><p>We sent this email to you because of your insatiable thirst for email inspiration that does not make your eyes burn
like you were thrown into a lake of sliced raw onions—ugh, the worst.</p>
<p style="padding-top:10px;">All this shiznit is © Really Good Emails 2018. All these images belong to us and our moms all said this is
one instance where we don't have to share if we don't want to. All the emails apparently still belong to the
individual companies, we just sort of "web photographed" them when they put them in our email inbox. </p>
<p style="padding-top:10px;">If you want to send us gifts, fan mail, or anything that does not include stalking or us waking up with you in our
living room—you can find us at 1040 W Washington St, Greenville, SC, USA 29601</p>
<p style="padding-top:10px;">Or, if you're just tired of hearing from us, you can unsubscribe too.</p></td>
</tr>
</table>
</body>
</html>
仔细查看后，我认为您的问题可能是您在 href link 标记中嵌入了 table，它对内联 CSS 应用了边距:
style="margin-top:25px; margin-left:15px; border-radius:5px;
左边距将防止它填充 100% 的宽度。
顺便说一句 - 我同意 J.vee 的评论，即您应该始终以移动优先的概念开发您的 CSS。但是，由于您使用的是预制模板，我猜这不是您的选择。
我正在学习如何使用媒体查询来编码响应式 HTML 电子邮件并且正在努力。我在 Really Good Emails (http://email.reallygoodemails.com/t/ViewEmail/i/5F9007F241DBA1802540EF23F30FEDED/5F41B898D731AECE2A1BF84ACBDD178B) 找到了一个很棒的电子邮件模板，并尝试从头开始编写代码。我能够获得桌面版本，但是在添加媒体查询时，我无法让中间部分 (.buttons) 遵守 100% 的最大宽度。
我在这里做错了什么？我相信其他人也在为此苦苦挣扎。我尝试使用我在 Litmus 上阅读的仅限表格的方法。
HTML 下面。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Really Good Emails</title>
<style type="text/css">
body {
background-color:#f7f7f7;
color:#5f5f5f;
font-family: Roboto,Tahoma,sans-serif;
}
h1 {
color:#404040;
}
.header {
background-image: url("http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/email-background2.jpg");
border-spacing: 0px;
border-collapse: collapse;
padding-bottom:0px;
}
a {
text-decoration:none;
display: block;
}
.btn {
opacity:1;
}
.btn:hover {
opacity:.8;
}
@media only screen and (max-width:510px) {
body {max-width: 100% !important;padding:0 !important;margin:0 !important;}
.header {max-width: 100% !important; padding:0 !important;margin:0 !important;}
.header img {width:300px !important;height:auto !important;}
.friday {max-width:100% !important;display:flex;align-items: center;}
.friday img {max-width:100% !important;height:auto !important;}
.advertise img {max-width:100% !important;height:auto !important;}
.buttons span {max-width: 100% !important;padding: 5px !important;}
.buttonsintro {max-width:100% !important;}
.buttons {max-width:100% !important;}
.buttons a {max-width:100% !important; padding: 10px 5px 10px 5px !important;}
.buttons h1,p {max-width:100% !important; padding: 10px 5px 10px 5px !important}
.advertise {max-width:100% !important;}
.friday h1 {padding: 0 0 0 15px !important;}
.curved {display:none !important;}
p {font-size:1rem !important;}
td {max-width: 100% !important;}
.footer {max-width: 100% !important;padding:5px 10px 0px 10px !important;}
.footer p {font-size:.8rem !important;}
.cliff1 {max-width:100% !important;}
.cliff2 {max-width:100% !important;display:block !important;}
.cliff2 td {margin:0px !important;}
.space {display:none !important;}
}
</style>
</head>
<body>
<table class="header" width="100%" bgcolor="#fe4c44" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 25px 0 25px 0; display:block;" align="center">
<a href="https://reallygoodemails.com/?utm_campaign=complete-your-profile&utm_source=ReallyGoodEmails&utm_medium=email">
<img style="display:block;" width="600px" height="64px" alt="Really Good Emails" src="http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/header_RGE-logo-9900000000079e3c.png">
</a>
</td>
</tr>
<tr>
<td style="width:600px;" align="center">
<img class="curved" style="display:block; max-width:600px;" width="600px" height="32px" src="http://i2.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/top-rounded3-9900000000079e3c.png">
</td>
</tr>
</table>
<table class="friday" align="center" width="600px" bgcolor="white">
<tr>
<td align="center" color="#5f5f5f;"><img width="560px" height="398px" alt="Feedback Friday"
src="http://i3.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/feedback-compressed-9900000000079e3c.png">
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">Template Eyes</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">Not all pre-built email templates are created equal. Some are born with looks so dreamy that you hardly need to change a thing. Others, as we will see in today's Feedback Friday, may need some work done on them but can walk a line of being overdone - kind of like a movie star who gets too much plastic surgery.
</p>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">This week we jump into a recently submitted B2B email to discuss where you can go wrong in those kinds of scenarios. (For clarity, we are talking about email template scenarios, not plastic surgery scenarios.)
</p>
</td>
</tr>
<tr>
<td>
<a style="color:white; text-decoration: none;" href="https://www.fadavis.com"><table class="btn" style="margin-top:25px; margin-left:15px; border-radius:5px;" align="left" bgcolor="#fe4c44">
<tr>
<td style="color:white;padding:10px 15px 10px 15px; font-size:.81rem; line-height:25px;" align="center">
<strong>BE WISE & CUSTOMIZE</strong>
</td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px" src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="advertise" align="center" width="600px" bgcolor="#f7f7f7">
<tr>
<td style="padding:20px 0 20px 0; font-size:.7rem;" align="center">This email is supported by:</td>
</tr>
<tr>
<td class="advertise" style="padding-bottom:35px;" align="center"><img width="560px" src="http://i5.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/ReallyGoodEmail_Banner_Animation_BlueBG_V1_L1R5-9900000000079e3c.gif">
</td>
</tr>
</table>
<table class="buttonsintro" align="center" width="600px" bgcolor="white">
<tr>
<td>
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">
Inspiring Stuff</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">
Here's what got us up in a state of mind surfing this week:</p>
</td>
</tr>
</table>
<table class="buttons" align="center" width="600px" bgcolor="white">
<tr>
<td class="btn" align="center"style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;padding: 12px 18px;
text-decoration: none; text-decoration: none;border-radius: 3px;
border: 1px solid red;">
<strong> SHOULD BUTTONS BE ROUNDED OR SQUARE?</strong></a></span></td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td class="btn" align="center" style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red;display: inline-block;">
<strong>⬛ WHAT'S THIS GONNA LOOK LIKE IN DARK MODE?</strong></a></span>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="margin-bottom:25px; border-radius: 3px;" bgcolor="white">
<a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;">
<strong> THE DESIGN SPRINT CHALLENGE OF NICK BRITO</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;"><strong> PRESENTING CONFLICTING OPTIONS IN EMAIL</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; max-width:80%; display: inline-block;"><strong> COLORFUL GRADIENT CARDS</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px"
src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="cliff1" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td>
<h2 style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="center">Follow Us off the Cliff</h2>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1rem;" color="#5f5f5f;" align="center">
We know what your mother said. If Really Good Emails jumped off a cliff would you go with them? Yes, of course you would. Don’t be silly.</p>
</td>
</tr>
</table>
<table class="cliff2" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="#38A1F3">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius:4px; display: inline"><strong>TWITTER</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px;border-radius: 4px;" bgcolor="#C92228">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px; display: inline"><strong>PINTEREST</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="black">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px;
display: inline"><strong>CODEPEN</strong></a></span>
</td>
<tr>
<td class="space" style="line-height:30px;"> </td>
</tr>
</table>
<table style="padding: 25px 0 25px 0" align="center" width="100%" bgcolor="white">
<tr>
<td align="center">
<h3>Design Better. Spam Never.</h3>
<p>Update Subscription - Articles & Interviews - Free Resources - View Online</p>
</td>
</table>
<table class="footer" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td style="color:#9a9ca0; font-size:.7rem; line-height:20px;padding-top:20px;"><p>We sent this email to you because of your insatiable thirst for email inspiration that does not make your eyes burn
like you were thrown into a lake of sliced raw onions—ugh, the worst.</p>
<p style="padding-top:10px;">All this shiznit is © Really Good Emails 2018. All these images belong to us and our moms all said this is
one instance where we don't have to share if we don't want to. All the emails apparently still belong to the
individual companies, we just sort of "web photographed" them when they put them in our email inbox. </p>
<p style="padding-top:10px;">If you want to send us gifts, fan mail, or anything that does not include stalking or us waking up with you in our
living room—you can find us at 1040 W Washington St, Greenville, SC, USA 29601</p>
<p style="padding-top:10px;">Or, if you're just tired of hearing from us, you can unsubscribe too.</p></td>
</tr>
</table>
</body>
</html>
仔细查看后，我认为您的问题可能是您在 href link 标记中嵌入了 table，它对内联 CSS 应用了边距:
style="margin-top:25px; margin-left:15px; border-radius:5px;
左边距将防止它填充 100% 的宽度。
顺便说一句 - 我同意 J.vee 的评论，即您应该始终以移动优先的概念开发您的 CSS。但是，由于您使用的是预制模板，我猜这不是您的选择。