如何删除 html css 移动响应表单的边距？
How to remove margin on html css mobile responsive form?
我创建了以下代码，但是当我尝试移动到移动版本时，右侧的边距无法让页面适合屏幕，而且看起来不太好。
我不知道它在那里的确切原因，这就是为什么我分享我的大部分代码。移动视图从 480px 开始。
我的问题是如何删除该边距？
编辑：边距大小约为 20px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Name Necklace</title>
</head>
<style>
:root{
--clr-accent: #FEC3B3;
--clr-grey: rgb(207, 207, 207);
}
#confirmed{
background-color: var(--clr-accent);
display: table;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-top: 3px solid white;
}
#hours{
background-color: black;
color: white;
text-align: center;
border-color: black;
padding-bottom: 0px;
}
#congrats{
text-align: center;
}
#button1{
text-align: center;
}
#btn1{
background-color: black;
color: white;
}
@media screen and (max-width: 480px){
*{
max-width: 420px;
}
* table{
max-width: 410px;
}
element.style{
margin-right:0px;
}
html,body {
margin-right:0px;
padding: 0;
}
*img{
width: 80%;
}
.table01 {
width: 460px;
font-size: 12px;
}
#extra01{
width: 50%;
font-size: 12px;
}
#track img{
max-width: 380px;
}
#o_details{
font-size: 14px;
}
#track2 img{
width: 75%;
}
#details01, #details02{
font-size: 12px;
}
#o_items{
font-size: 14px;
}
#o_info{
font-size: 14px;
}
h1{
font-size: 20px;
}
.orders1 img, .orders2 img{
width: 80%;
}
.orders1, .orders2{
font-size: 12px;
}
#method{
font-size: 12px;
}
.o_conf img{
width: 70%;
}
#pers_sel p{
font-size: 12px;
}
.sTotal td,.sCost td,.tCost{
display:none;
}
#eButton{
padding: 5px 5px 5px 5px;
font-size: 12px;
}
}
</style>
<body>
<header>
<center>
<table class="table01" align="center" style="width:650px;border-collapse: collapse; ">
<tr>
<a href="#"><img src="./images/bracelate_03.jpg" alt="bracelate_03" /> </a>
</center>
</tr>
<tr id="extra01" style=" background-color: black;
color: white;
text-align: center;
border-color: black;
font-size: 12px;
font-weight:100;
">
<td id="oHours" style="padding-top: 5px; line-height: 0px;">
<p id="onlyh01" style="font-size: 16px; "> <b>48 HOURS ONLY</p></br>
<p id="onlyh02" style="font-weight: 500; font-size: 16px;">EXTRA 15% OFF YOUR NEXT ORDER | CODE : B15CK
</p>
</td>
</tr>
<tr id="confirmed" style="width:650px">
<th rowspan="2" style="padding-left:50px ;"><img src="./images/bracelate_07.jpg" alt="bracelate_07" /></th>
<td style="padding-left:10px ;">
<h1> YOUR ORDER IS CONFIRMED!</h1>
</td>
</tr>
<tr id="congrats">
<td style=" padding-top: 20px;
padding-bottom: 20px;">Congratulations %%firstname%%, you made a great choice </br>
We're excited to start working on your personalized jewelry. </br>
You will recieve a shipping notice as soon as it leaves our hand.
</td>
</tr>
<tr id="button1">
<td> <button id="btn1" style="padding:5px 40px 5px 40px; font-weight: bold; ">GET 15% OFF</button> </td>
</tr>
<tr id="track1" style="text-align: center;">
<td style="padding-top: 15px; padding-bottom:25px; font-size: 14px;"> <b><u>TRACK YOUR ORDER ></u></b> </td>
</tr>
<tr id="track2">
<td>
<center><img src="./images/bracelate_11.jpg" alt="bracelate_11" /> </center>
</td>
</tr>
</table>
<table class="oDetails" style="width:650px">
<tr id="o_details">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">Order
Details
</td>
</tr>
<tr id="details01">
<td style="padding-left:50px; padding-top:20px"> <u>Order Number:</u> 65224865 </td>
<tr id="details02">
<td style="padding-left:50px; padding-bottom:20px"> <u>Order Date:</u> 02/09/2018</td>
</tr>
<tr id="o_items">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">Ordered
Items
</td>
</tr>
<tr id="items01">
<td></td>
</tr>
</table>
<table class="orders1">
<tbody>
<tr>
<td rowspan="7" width="200"><b>
<img src="./images/bracelate_22.jpg" alt="bracelate_22" style="margin-bottom:40px" />
</b></td>
<td colspan="2" width="367" style="padding-top: 5px; padding-bottom: 15px;">Personalized Engraved
Mum Birthstone Neklace</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Material :</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Sterling Silver</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">1st Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#1</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">2nd Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#2</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Chain Length</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">45 cm chain - adult</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Price</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;"></td>
</tr>
<tr>
<td width="184" style="padding-top: 10px; padding-bottom: 10px; color:#ee9d86">Make Changes</td>
<td width="183" style="padding-top: 10px; padding-bottom: 10px;"></td>
</tr>
</tbody>
</table>
<table>
<tr id="divider2">
<td rowspan="2"><img src="./images/divider2.jpg" alt="divider2" /></td>
</tr>
</table>
<table class="orders2">
<tbody>
<tr>
<td rowspan="7" width="200"><b>
<img src="./images/Order_Confirmation_23.jpg" alt="Order_Confirmation_23" style="margin-bottom:40px"/>
</b></td>
<td colspan="2" width="367" style="padding-top: 5px; padding-bottom: 15px;">Personalized Engraved
Mum Birthstone Neklace</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Material :</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Sterling Silver</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">1st Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#1</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">2nd Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#2</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Chain Length</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">45 cm chain - adult</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Price</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;"></td>
</tr>
<tr>
<td width="184" style="padding-top: 10px; padding-bottom: 10px; color:#ee9d86">Make Changes</td>
<td width="183" style="padding-top: 10px; padding-bottom: 10px;"></td>
</tr>
</tbody>
</table>
<table style="width:650px">
<tbody>
<tr id="o_info">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">
Shipping Info</td>
</tr>
<tr>
<td style=" padding-left: 50px ; padding-top: 10px; padding-bottom: 20px; text-align: center; ">
<center> <button id="eButton"
style="padding: 5px 20px 5px 20px; background-color: white; display: flex; align-items: center;"><img
src="./images/bracelate_15.jpg" alt="bracelate_15" /> Estimated Delivery Date
<b>Thursday November 7</b> </button></center>
</td>
</tr>
<tr>
<td style=" padding-left: 50px ; "><u>Shipping Method:</u> </br>
</u>standard shipping – 10 business days – FREE
</td>
<tr>
<td id="method" style=" padding-left: 50px ; "><a href="#">Change Shopping Method</a></td>
</tr>
</tr>
<tr>
<td style=" padding-left: 50px ; padding-top: 20px;"><u>Shipping Address </br>
</u>Idania pérez </br>
3001 nw 15 st </br>
Miami, florida 33125 </br>
united states </br>
<a href="#"> Change Shopping Method</a></td>
</tr>
</tbody>
</table>
<table>
<tr id="divider">
<th rowspan="2"><img src="./images/divider.jpg" alt="divider" /></th>
</tr>
</table>
<table class="sTotal" style="width:650px; margin-left: 100px ">
<tr>
<td id="stotal_1" style = "width:500px">Subtotal</td>
<td id="stotal_2" >89.80</td>
</tr>
</table>
<table class="sCost" style="width:650px; margin-left: 100px">
<tr>
<td id="scost_1"style = "width:500px">Shipping cost</td>
<td id="scost_2">Free of Charge</td>
</tr>
</table>
<table>
<tr id="divider2">
<td rowspan="2"><img src="./images/divider2.jpg" alt="divider2" /></td>
</tr>
</table>
<table class="tCost" style="width:650px; margin-left: 100px">
<tr>
<td id="tcost_1" style = "width:500px"><strong>Total Cost</strong></td>
<td id="tcost_2"><strong>89.80</strong></td>
</tr>
</table>
<table>
<tr id="bracelate_18">
<th rowspan="2"><img src="./images/bracelate_18.jpg" alt="bracelate_18" /></th>
<td>
</table>
<table >
<tr id="selected">
<td id="pers_sel" style="width: 650px; text-align: center;padding: 10px 0px 10px 0px; font-size: 18px;"> <p>Personally
Selected for %%firstname%%</p> </td>
</tr>
</table>
<table class="o_conf"style="width: 650px;">
<tbody>
<tr>
<td width="190" style="text-align: center;"><img src="./images/Order_Confirmation_21.jpg" alt="Order_Confirmation_21" /> <p style="text-align: center; font-weight: bold; text-decoration: underline; "> SHOP NOW ></p></td>
<td width="190"style="text-align: center;"><img src="./images/bracelate_22.jpg" alt="bracelate_22" /> <p style="text-align: center;font-weight: bold; text-decoration: underline; ">SHOP NOW ></p></td>
<td width="190" style="text-align: center;"><img src="./images/Order_Confirmation_23.jpg" alt="Order_Confirmation_23" /><p style="text-align: center;font-weight: bold; text-decoration: underline; ">SHOP NOW ></p></td>
</tr>
</tbody>
</table>
<tr>
<td id="btm_menu" width="650" style="padding-top: 30px;">
<table id="new_menue_2020" valign="middle" cellpadding="0" cellspacing="0" border="0" width="650"
align="center" bgcolor="#ffffff" style="padding: 0px 0px 0px; vertical-align: middle;">
<tbody>
<tr>
<td id="btm_menu_men_icon" bgcolor="#f3f3f3" width="222" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_men_icon_img" width="38"
src="./images/bracelate_27.jpg"></a>
</td>
<td id="btm_menu_men_text" bgcolor="#f3f3f3" width="372" align="left"
style="border-bottom: 3px solid #ffffff; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Jewelry for Him</a>
</td>
<td id="btm_menu_men_arrow" bgcolor="#f3f3f3" width="70" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_men_arrow_img" width="70"
src="./images/bracelate_29.jpg"> </a>
</td>
</tr>
<tr>
<td id="btm_menu_mom_icon" width="222" bgcolor="#f3f3f3" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_mom_icon_img" width="38"
src="./images/bracelate_36.jpg" ></a>
</td>
<td id="btm_menu_mom_text" width="372" bgcolor="#f3f3f3" align="left"
style="border-bottom: 3px solid #ffffff; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Jewelry for Her</a>
</td>
<td id="btm_menu_mom_arrow" width="70" bgcolor="#f3f3f3" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_mom_arrow_img" width="70"
src="./images/bracelate_29.jpg"></a>
</td>
</tr>
<tr>
<td id="btm_menu_kid_icon" bgcolor="#f3f3f3" width="222" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_kid_icon_img" width="38"
src="./images/bracelate_32.jpg"></a>
</td>
<td id="btm_menu_kid_text" bgcolor="#f3f3f3" width="358"
style="border-bottom: 3px solid #ffffff; vertical-align: middle; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Best Sellers </a>
</td>
<td id="btm_menu_kid_arrow" bgcolor="#f3f3f3" width="70" align="right"
style="border-bottom: 3px solid #ffffff;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_kid_arrow_img" width="70"
src="./images/bracelate_29.jpg"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<table style="margin-top: 20px;">
</table>
<table
style="width:650px; margin: 30px, 0px, 30px, 0px; text-align: center; background-color:#f3f3f3; padding: 5px; line-height: 0px;">
<tbody>
<tr>
<tr>
<td style="border: 1px solid rgb(189, 188, 188)">
<p style="font-size: 18px;"> <i> Got a Question ?</i></p>
<p style="font-size: 14px;">Visit Our Help Center</p>
</td>
</tr>
</tr>
</tbody>
</table>
<table style="margin-top: 20px;">
</table>
<table>
<tr>
<td style="text-align:center; line-height: 5px;">
<h1 style="padding-bottom: 5px;">SUBSCRIBERS SAVE THE MOST!</h1>
<p> Sign up now for VIP access to exclusive offers, </p>
<p>giveaways and new jewellery launches</p>
</td>
</tr>
<tr id="button1">
<td> <button id="btn1" style="padding:5px 40px 5px 40px; font-weight: bold; ">SUBSCRIBE NOW</button>
</td>
</tr>
</table>
<table>
<tr id="divider">
<th rowspan="2"><img src="./images/divider.jpg" alt="divider" /></th>
<tr>
</table>
<table style="margin-top: 20px; line-height: 25px;">
<tr>
<td>This e-mail was sent from an automated system that is unable to accept incoming e-mails. <br> Please
do not reply to this e-mail.
<p style="line-height: 0rem; color: gray;">Copyright <a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;"> <u>MyNameNecklace. </u> </a> All rights reserved.</p>
</td>
</tr>
</table>
</center>
</header>
</body>
</html>
这是因为您在 table 中添加了边距。
<table class="sCost" style="width:650px; margin-left: 100px">
我从导致问题的 table 中删除了 margin-left。
</head>
<style>
:root{
--clr-accent: #FEC3B3;
--clr-grey: rgb(207, 207, 207);
}
#confirmed{
background-color: var(--clr-accent);
display: table;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-top: 3px solid white;
}
#hours{
background-color: black;
color: white;
text-align: center;
border-color: black;
padding-bottom: 0px;
}
#congrats{
text-align: center;
}
#button1{
text-align: center;
}
#btn1{
background-color: black;
color: white;
}
@media screen and (max-width: 480px){
*{
max-width: 420px;
}
* table{
max-width: 410px;
}
element.style{
margin-right:0px;
}
html,body {
margin-right:0px;
padding: 0;
}
*img{
width: 80%;
}
.table01 {
width: 460px;
font-size: 12px;
}
#extra01{
width: 50%;
font-size: 12px;
}
#track img{
max-width: 380px;
}
#o_details{
font-size: 14px;
}
#track2 img{
width: 75%;
}
#details01, #details02{
font-size: 12px;
}
#o_items{
font-size: 14px;
}
#o_info{
font-size: 14px;
}
h1{
font-size: 20px;
}
.orders1 img, .orders2 img{
width: 80%;
}
.orders1, .orders2{
font-size: 12px;
}
#method{
font-size: 12px;
}
.o_conf img{
width: 70%;
}
#pers_sel p{
font-size: 12px;
}
.sTotal td,.sCost td,.tCost{
display:none;
}
#eButton{
padding: 5px 5px 5px 5px;
font-size: 12px;
}
}
</style>
<body>
<header>
<center>
<table class="table01" align="center" style="width:650px;border-collapse: collapse; ">
<tr>
<a href="#"><img src="./images/bracelate_03.jpg" alt="bracelate_03" /> </a>
</center>
</tr>
<tr id="extra01" style=" background-color: black;
color: white;
text-align: center;
border-color: black;
font-size: 12px;
font-weight:100;
">
<td id="oHours" style="padding-top: 5px; line-height: 0px;">
<p id="onlyh01" style="font-size: 16px; "> <b>48 HOURS ONLY</p></br>
<p id="onlyh02" style="font-weight: 500; font-size: 16px;">EXTRA 15% OFF YOUR NEXT ORDER | CODE : B15CK
</p>
</td>
</tr>
<tr id="confirmed" style="width:650px">
<th rowspan="2" style="padding-left:50px ;"><img src="./images/bracelate_07.jpg" alt="bracelate_07" /></th>
<td style="padding-left:10px ;">
<h1> YOUR ORDER IS CONFIRMED!</h1>
</td>
</tr>
<tr id="congrats">
<td style=" padding-top: 20px;
padding-bottom: 20px;">Congratulations %%firstname%%, you made a great choice </br>
We're excited to start working on your personalized jewelry. </br>
You will recieve a shipping notice as soon as it leaves our hand.
</td>
</tr>
<tr id="button1">
<td> <button id="btn1" style="padding:5px 40px 5px 40px; font-weight: bold; ">GET 15% OFF</button> </td>
</tr>
<tr id="track1" style="text-align: center;">
<td style="padding-top: 15px; padding-bottom:25px; font-size: 14px;"> <b><u>TRACK YOUR ORDER ></u></b> </td>
</tr>
<tr id="track2">
<td>
<center><img src="./images/bracelate_11.jpg" alt="bracelate_11" /> </center>
</td>
</tr>
</table>
<table class="oDetails" style="width:650px">
<tr id="o_details">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">Order
Details
</td>
</tr>
<tr id="details01">
<td style="padding-left:50px; padding-top:20px"> <u>Order Number:</u> 65224865 </td>
<tr id="details02">
<td style="padding-left:50px; padding-bottom:20px"> <u>Order Date:</u> 02/09/2018</td>
</tr>
<tr id="o_items">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">Ordered
Items
</td>
</tr>
<tr id="items01">
<td></td>
</tr>
</table>
<table class="orders1">
<tbody>
<tr>
<td rowspan="7" width="200"><b>
<img src="./images/bracelate_22.jpg" alt="bracelate_22" style="margin-bottom:40px" />
</b></td>
<td colspan="2" width="367" style="padding-top: 5px; padding-bottom: 15px;">Personalized Engraved
Mum Birthstone Neklace</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Material :</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Sterling Silver</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">1st Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#1</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">2nd Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#2</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Chain Length</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">45 cm chain - adult</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Price</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;"></td>
</tr>
<tr>
<td width="184" style="padding-top: 10px; padding-bottom: 10px; color:#ee9d86">Make Changes</td>
<td width="183" style="padding-top: 10px; padding-bottom: 10px;"></td>
</tr>
</tbody>
</table>
<table>
<tr id="divider2">
<td rowspan="2"><img src="./images/divider2.jpg" alt="divider2" /></td>
</tr>
</table>
<table class="orders2">
<tbody>
<tr>
<td rowspan="7" width="200"><b>
<img src="./images/Order_Confirmation_23.jpg" alt="Order_Confirmation_23" style="margin-bottom:40px"/>
</b></td>
<td colspan="2" width="367" style="padding-top: 5px; padding-bottom: 15px;">Personalized Engraved
Mum Birthstone Neklace</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Material :</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Sterling Silver</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">1st Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#1</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">2nd Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#2</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Chain Length</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">45 cm chain - adult</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Price</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;"></td>
</tr>
<tr>
<td width="184" style="padding-top: 10px; padding-bottom: 10px; color:#ee9d86">Make Changes</td>
<td width="183" style="padding-top: 10px; padding-bottom: 10px;"></td>
</tr>
</tbody>
</table>
<table style="width:650px">
<tbody>
<tr id="o_info">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">
Shipping Info</td>
</tr>
<tr>
<td style=" padding-left: 50px ; padding-top: 10px; padding-bottom: 20px; text-align: center; ">
<center> <button id="eButton"
style="padding: 5px 20px 5px 20px; background-color: white; display: flex; align-items: center;"><img
src="./images/bracelate_15.jpg" alt="bracelate_15" /> Estimated Delivery Date
<b>Thursday November 7</b> </button></center>
</td>
</tr>
<tr>
<td style=" padding-left: 50px ; "><u>Shipping Method:</u> </br>
</u>standard shipping – 10 business days – FREE
</td>
<tr>
<td id="method" style=" padding-left: 50px ; "><a href="#">Change Shopping Method</a></td>
</tr>
</tr>
<tr>
<td style=" padding-left: 50px ; padding-top: 20px;"><u>Shipping Address </br>
</u>Idania pérez </br>
3001 nw 15 st </br>
Miami, florida 33125 </br>
united states </br>
<a href="#"> Change Shopping Method</a></td>
</tr>
</tbody>
</table>
<table>
<tr id="divider">
<th rowspan="2"><img src="./images/divider.jpg" alt="divider" /></th>
</tr>
</table>
<table class="sTotal" style="width:650px;">
<tr>
<td id="stotal_1" style = "width:500px">Subtotal</td>
<td id="stotal_2" >89.80</td>
</tr>
</table>
<table class="sCost" style="width:650px;">
<tr>
<td id="scost_1"style = "width:500px">Shipping cost</td>
<td id="scost_2">Free of Charge</td>
</tr>
</table>
<table>
<tr id="divider2">
<td rowspan="2"><img src="./images/divider2.jpg" alt="divider2" /></td>
</tr>
</table>
<table class="tCost" style="width:650px;">
<tr>
<td id="tcost_1" style = "width:500px"><strong>Total Cost</strong></td>
<td id="tcost_2"><strong>89.80</strong></td>
</tr>
</table>
<table>
<tr id="bracelate_18">
<th rowspan="2"><img src="./images/bracelate_18.jpg" alt="bracelate_18" /></th>
<td>
</table>
<table >
<tr id="selected">
<td id="pers_sel" style="width: 650px; text-align: center;padding: 10px 0px 10px 0px; font-size: 18px;"> <p>Personally
Selected for %%firstname%%</p> </td>
</tr>
</table>
<table class="o_conf"style="width: 650px;">
<tbody>
<tr>
<td width="190" style="text-align: center;"><img src="./images/Order_Confirmation_21.jpg" alt="Order_Confirmation_21" /> <p style="text-align: center; font-weight: bold; text-decoration: underline; "> SHOP NOW ></p></td>
<td width="190"style="text-align: center;"><img src="./images/bracelate_22.jpg" alt="bracelate_22" /> <p style="text-align: center;font-weight: bold; text-decoration: underline; ">SHOP NOW ></p></td>
<td width="190" style="text-align: center;"><img src="./images/Order_Confirmation_23.jpg" alt="Order_Confirmation_23" /><p style="text-align: center;font-weight: bold; text-decoration: underline; ">SHOP NOW ></p></td>
</tr>
</tbody>
</table>
<tr>
<td id="btm_menu" width="650" style="padding-top: 30px;">
<table id="new_menue_2020" valign="middle" cellpadding="0" cellspacing="0" border="0" width="650"
align="center" bgcolor="#ffffff" style="padding: 0px 0px 0px; vertical-align: middle;">
<tbody>
<tr>
<td id="btm_menu_men_icon" bgcolor="#f3f3f3" width="222" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_men_icon_img" width="38"
src="./images/bracelate_27.jpg"></a>
</td>
<td id="btm_menu_men_text" bgcolor="#f3f3f3" width="372" align="left"
style="border-bottom: 3px solid #ffffff; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Jewelry for Him</a>
</td>
<td id="btm_menu_men_arrow" bgcolor="#f3f3f3" width="70" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_men_arrow_img" width="70"
src="./images/bracelate_29.jpg"> </a>
</td>
</tr>
<tr>
<td id="btm_menu_mom_icon" width="222" bgcolor="#f3f3f3" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_mom_icon_img" width="38"
src="./images/bracelate_36.jpg" ></a>
</td>
<td id="btm_menu_mom_text" width="372" bgcolor="#f3f3f3" align="left"
style="border-bottom: 3px solid #ffffff; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Jewelry for Her</a>
</td>
<td id="btm_menu_mom_arrow" width="70" bgcolor="#f3f3f3" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_mom_arrow_img" width="70"
src="./images/bracelate_29.jpg"></a>
</td>
</tr>
<tr>
<td id="btm_menu_kid_icon" bgcolor="#f3f3f3" width="222" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_kid_icon_img" width="38"
src="./images/bracelate_32.jpg"></a>
</td>
<td id="btm_menu_kid_text" bgcolor="#f3f3f3" width="358"
style="border-bottom: 3px solid #ffffff; vertical-align: middle; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Best Sellers </a>
</td>
<td id="btm_menu_kid_arrow" bgcolor="#f3f3f3" width="70" align="right"
style="border-bottom: 3px solid #ffffff;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_kid_arrow_img" width="70"
src="./images/bracelate_29.jpg"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<table style="margin-top: 20px;">
</table>
<table
style="width:650px; margin: 30px, 0px, 30px, 0px; text-align: center; background-color:#f3f3f3; padding: 5px; line-height: 0px;">
<tbody>
<tr>
<tr>
<td style="border: 1px solid rgb(189, 188, 188)">
<p style="font-size: 18px;"> <i> Got a Question ?</i></p>
<p style="font-size: 14px;">Visit Our Help Center</p>
</td>
</tr>
</tr>
</tbody>
</table>
<table style="margin-top: 20px;">
</table>
<table>
<tr>
<td style="text-align:center; line-height: 5px;">
<h1 style="padding-bottom: 5px;">SUBSCRIBERS SAVE THE MOST!</h1>
<p> Sign up now for VIP access to exclusive offers, </p>
<p>giveaways and new jewellery launches</p>
</td>
</tr>
<tr id="button1">
<td> <button id="btn1" style="padding:5px 40px 5px 40px; font-weight: bold; ">SUBSCRIBE NOW</button>
</td>
</tr>
</table>
<table>
<tr id="divider">
<th rowspan="2"><img src="./images/divider.jpg" alt="divider" /></th>
<tr>
</table>
<table style="margin-top: 20px; line-height: 25px;">
<tr>
<td>This e-mail was sent from an automated system that is unable to accept incoming e-mails. <br> Please
do not reply to this e-mail.
<p style="line-height: 0rem; color: gray;">Copyright <a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;"> <u>MyNameNecklace. </u> </a> All rights reserved.</p>
</td>
</tr>
</table>
</center>
</header>
</body>
</html>
我创建了以下代码，但是当我尝试移动到移动版本时，右侧的边距无法让页面适合屏幕，而且看起来不太好。 我不知道它在那里的确切原因，这就是为什么我分享我的大部分代码。移动视图从 480px 开始。
我的问题是如何删除该边距？
编辑：边距大小约为 20px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Name Necklace</title>
</head>
<style>
:root{
--clr-accent: #FEC3B3;
--clr-grey: rgb(207, 207, 207);
}
#confirmed{
background-color: var(--clr-accent);
display: table;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-top: 3px solid white;
}
#hours{
background-color: black;
color: white;
text-align: center;
border-color: black;
padding-bottom: 0px;
}
#congrats{
text-align: center;
}
#button1{
text-align: center;
}
#btn1{
background-color: black;
color: white;
}
@media screen and (max-width: 480px){
*{
max-width: 420px;
}
* table{
max-width: 410px;
}
element.style{
margin-right:0px;
}
html,body {
margin-right:0px;
padding: 0;
}
*img{
width: 80%;
}
.table01 {
width: 460px;
font-size: 12px;
}
#extra01{
width: 50%;
font-size: 12px;
}
#track img{
max-width: 380px;
}
#o_details{
font-size: 14px;
}
#track2 img{
width: 75%;
}
#details01, #details02{
font-size: 12px;
}
#o_items{
font-size: 14px;
}
#o_info{
font-size: 14px;
}
h1{
font-size: 20px;
}
.orders1 img, .orders2 img{
width: 80%;
}
.orders1, .orders2{
font-size: 12px;
}
#method{
font-size: 12px;
}
.o_conf img{
width: 70%;
}
#pers_sel p{
font-size: 12px;
}
.sTotal td,.sCost td,.tCost{
display:none;
}
#eButton{
padding: 5px 5px 5px 5px;
font-size: 12px;
}
}
</style>
<body>
<header>
<center>
<table class="table01" align="center" style="width:650px;border-collapse: collapse; ">
<tr>
<a href="#"><img src="./images/bracelate_03.jpg" alt="bracelate_03" /> </a>
</center>
</tr>
<tr id="extra01" style=" background-color: black;
color: white;
text-align: center;
border-color: black;
font-size: 12px;
font-weight:100;
">
<td id="oHours" style="padding-top: 5px; line-height: 0px;">
<p id="onlyh01" style="font-size: 16px; "> <b>48 HOURS ONLY</p></br>
<p id="onlyh02" style="font-weight: 500; font-size: 16px;">EXTRA 15% OFF YOUR NEXT ORDER | CODE : B15CK
</p>
</td>
</tr>
<tr id="confirmed" style="width:650px">
<th rowspan="2" style="padding-left:50px ;"><img src="./images/bracelate_07.jpg" alt="bracelate_07" /></th>
<td style="padding-left:10px ;">
<h1> YOUR ORDER IS CONFIRMED!</h1>
</td>
</tr>
<tr id="congrats">
<td style=" padding-top: 20px;
padding-bottom: 20px;">Congratulations %%firstname%%, you made a great choice </br>
We're excited to start working on your personalized jewelry. </br>
You will recieve a shipping notice as soon as it leaves our hand.
</td>
</tr>
<tr id="button1">
<td> <button id="btn1" style="padding:5px 40px 5px 40px; font-weight: bold; ">GET 15% OFF</button> </td>
</tr>
<tr id="track1" style="text-align: center;">
<td style="padding-top: 15px; padding-bottom:25px; font-size: 14px;"> <b><u>TRACK YOUR ORDER ></u></b> </td>
</tr>
<tr id="track2">
<td>
<center><img src="./images/bracelate_11.jpg" alt="bracelate_11" /> </center>
</td>
</tr>
</table>
<table class="oDetails" style="width:650px">
<tr id="o_details">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">Order
Details
</td>
</tr>
<tr id="details01">
<td style="padding-left:50px; padding-top:20px"> <u>Order Number:</u> 65224865 </td>
<tr id="details02">
<td style="padding-left:50px; padding-bottom:20px"> <u>Order Date:</u> 02/09/2018</td>
</tr>
<tr id="o_items">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">Ordered
Items
</td>
</tr>
<tr id="items01">
<td></td>
</tr>
</table>
<table class="orders1">
<tbody>
<tr>
<td rowspan="7" width="200"><b>
<img src="./images/bracelate_22.jpg" alt="bracelate_22" style="margin-bottom:40px" />
</b></td>
<td colspan="2" width="367" style="padding-top: 5px; padding-bottom: 15px;">Personalized Engraved
Mum Birthstone Neklace</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Material :</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Sterling Silver</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">1st Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#1</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">2nd Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#2</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Chain Length</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">45 cm chain - adult</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Price</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;"></td>
</tr>
<tr>
<td width="184" style="padding-top: 10px; padding-bottom: 10px; color:#ee9d86">Make Changes</td>
<td width="183" style="padding-top: 10px; padding-bottom: 10px;"></td>
</tr>
</tbody>
</table>
<table>
<tr id="divider2">
<td rowspan="2"><img src="./images/divider2.jpg" alt="divider2" /></td>
</tr>
</table>
<table class="orders2">
<tbody>
<tr>
<td rowspan="7" width="200"><b>
<img src="./images/Order_Confirmation_23.jpg" alt="Order_Confirmation_23" style="margin-bottom:40px"/>
</b></td>
<td colspan="2" width="367" style="padding-top: 5px; padding-bottom: 15px;">Personalized Engraved
Mum Birthstone Neklace</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Material :</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Sterling Silver</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">1st Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#1</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">2nd Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#2</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Chain Length</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">45 cm chain - adult</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Price</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;"></td>
</tr>
<tr>
<td width="184" style="padding-top: 10px; padding-bottom: 10px; color:#ee9d86">Make Changes</td>
<td width="183" style="padding-top: 10px; padding-bottom: 10px;"></td>
</tr>
</tbody>
</table>
<table style="width:650px">
<tbody>
<tr id="o_info">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">
Shipping Info</td>
</tr>
<tr>
<td style=" padding-left: 50px ; padding-top: 10px; padding-bottom: 20px; text-align: center; ">
<center> <button id="eButton"
style="padding: 5px 20px 5px 20px; background-color: white; display: flex; align-items: center;"><img
src="./images/bracelate_15.jpg" alt="bracelate_15" /> Estimated Delivery Date
<b>Thursday November 7</b> </button></center>
</td>
</tr>
<tr>
<td style=" padding-left: 50px ; "><u>Shipping Method:</u> </br>
</u>standard shipping – 10 business days – FREE
</td>
<tr>
<td id="method" style=" padding-left: 50px ; "><a href="#">Change Shopping Method</a></td>
</tr>
</tr>
<tr>
<td style=" padding-left: 50px ; padding-top: 20px;"><u>Shipping Address </br>
</u>Idania pérez </br>
3001 nw 15 st </br>
Miami, florida 33125 </br>
united states </br>
<a href="#"> Change Shopping Method</a></td>
</tr>
</tbody>
</table>
<table>
<tr id="divider">
<th rowspan="2"><img src="./images/divider.jpg" alt="divider" /></th>
</tr>
</table>
<table class="sTotal" style="width:650px; margin-left: 100px ">
<tr>
<td id="stotal_1" style = "width:500px">Subtotal</td>
<td id="stotal_2" >89.80</td>
</tr>
</table>
<table class="sCost" style="width:650px; margin-left: 100px">
<tr>
<td id="scost_1"style = "width:500px">Shipping cost</td>
<td id="scost_2">Free of Charge</td>
</tr>
</table>
<table>
<tr id="divider2">
<td rowspan="2"><img src="./images/divider2.jpg" alt="divider2" /></td>
</tr>
</table>
<table class="tCost" style="width:650px; margin-left: 100px">
<tr>
<td id="tcost_1" style = "width:500px"><strong>Total Cost</strong></td>
<td id="tcost_2"><strong>89.80</strong></td>
</tr>
</table>
<table>
<tr id="bracelate_18">
<th rowspan="2"><img src="./images/bracelate_18.jpg" alt="bracelate_18" /></th>
<td>
</table>
<table >
<tr id="selected">
<td id="pers_sel" style="width: 650px; text-align: center;padding: 10px 0px 10px 0px; font-size: 18px;"> <p>Personally
Selected for %%firstname%%</p> </td>
</tr>
</table>
<table class="o_conf"style="width: 650px;">
<tbody>
<tr>
<td width="190" style="text-align: center;"><img src="./images/Order_Confirmation_21.jpg" alt="Order_Confirmation_21" /> <p style="text-align: center; font-weight: bold; text-decoration: underline; "> SHOP NOW ></p></td>
<td width="190"style="text-align: center;"><img src="./images/bracelate_22.jpg" alt="bracelate_22" /> <p style="text-align: center;font-weight: bold; text-decoration: underline; ">SHOP NOW ></p></td>
<td width="190" style="text-align: center;"><img src="./images/Order_Confirmation_23.jpg" alt="Order_Confirmation_23" /><p style="text-align: center;font-weight: bold; text-decoration: underline; ">SHOP NOW ></p></td>
</tr>
</tbody>
</table>
<tr>
<td id="btm_menu" width="650" style="padding-top: 30px;">
<table id="new_menue_2020" valign="middle" cellpadding="0" cellspacing="0" border="0" width="650"
align="center" bgcolor="#ffffff" style="padding: 0px 0px 0px; vertical-align: middle;">
<tbody>
<tr>
<td id="btm_menu_men_icon" bgcolor="#f3f3f3" width="222" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_men_icon_img" width="38"
src="./images/bracelate_27.jpg"></a>
</td>
<td id="btm_menu_men_text" bgcolor="#f3f3f3" width="372" align="left"
style="border-bottom: 3px solid #ffffff; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Jewelry for Him</a>
</td>
<td id="btm_menu_men_arrow" bgcolor="#f3f3f3" width="70" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_men_arrow_img" width="70"
src="./images/bracelate_29.jpg"> </a>
</td>
</tr>
<tr>
<td id="btm_menu_mom_icon" width="222" bgcolor="#f3f3f3" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_mom_icon_img" width="38"
src="./images/bracelate_36.jpg" ></a>
</td>
<td id="btm_menu_mom_text" width="372" bgcolor="#f3f3f3" align="left"
style="border-bottom: 3px solid #ffffff; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Jewelry for Her</a>
</td>
<td id="btm_menu_mom_arrow" width="70" bgcolor="#f3f3f3" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_mom_arrow_img" width="70"
src="./images/bracelate_29.jpg"></a>
</td>
</tr>
<tr>
<td id="btm_menu_kid_icon" bgcolor="#f3f3f3" width="222" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_kid_icon_img" width="38"
src="./images/bracelate_32.jpg"></a>
</td>
<td id="btm_menu_kid_text" bgcolor="#f3f3f3" width="358"
style="border-bottom: 3px solid #ffffff; vertical-align: middle; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Best Sellers </a>
</td>
<td id="btm_menu_kid_arrow" bgcolor="#f3f3f3" width="70" align="right"
style="border-bottom: 3px solid #ffffff;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_kid_arrow_img" width="70"
src="./images/bracelate_29.jpg"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<table style="margin-top: 20px;">
</table>
<table
style="width:650px; margin: 30px, 0px, 30px, 0px; text-align: center; background-color:#f3f3f3; padding: 5px; line-height: 0px;">
<tbody>
<tr>
<tr>
<td style="border: 1px solid rgb(189, 188, 188)">
<p style="font-size: 18px;"> <i> Got a Question ?</i></p>
<p style="font-size: 14px;">Visit Our Help Center</p>
</td>
</tr>
</tr>
</tbody>
</table>
<table style="margin-top: 20px;">
</table>
<table>
<tr>
<td style="text-align:center; line-height: 5px;">
<h1 style="padding-bottom: 5px;">SUBSCRIBERS SAVE THE MOST!</h1>
<p> Sign up now for VIP access to exclusive offers, </p>
<p>giveaways and new jewellery launches</p>
</td>
</tr>
<tr id="button1">
<td> <button id="btn1" style="padding:5px 40px 5px 40px; font-weight: bold; ">SUBSCRIBE NOW</button>
</td>
</tr>
</table>
<table>
<tr id="divider">
<th rowspan="2"><img src="./images/divider.jpg" alt="divider" /></th>
<tr>
</table>
<table style="margin-top: 20px; line-height: 25px;">
<tr>
<td>This e-mail was sent from an automated system that is unable to accept incoming e-mails. <br> Please
do not reply to this e-mail.
<p style="line-height: 0rem; color: gray;">Copyright <a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;"> <u>MyNameNecklace. </u> </a> All rights reserved.</p>
</td>
</tr>
</table>
</center>
</header>
</body>
</html>
这是因为您在 table 中添加了边距。
<table class="sCost" style="width:650px; margin-left: 100px">
我从导致问题的 table 中删除了 margin-left。
</head>
<style>
:root{
--clr-accent: #FEC3B3;
--clr-grey: rgb(207, 207, 207);
}
#confirmed{
background-color: var(--clr-accent);
display: table;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-top: 3px solid white;
}
#hours{
background-color: black;
color: white;
text-align: center;
border-color: black;
padding-bottom: 0px;
}
#congrats{
text-align: center;
}
#button1{
text-align: center;
}
#btn1{
background-color: black;
color: white;
}
@media screen and (max-width: 480px){
*{
max-width: 420px;
}
* table{
max-width: 410px;
}
element.style{
margin-right:0px;
}
html,body {
margin-right:0px;
padding: 0;
}
*img{
width: 80%;
}
.table01 {
width: 460px;
font-size: 12px;
}
#extra01{
width: 50%;
font-size: 12px;
}
#track img{
max-width: 380px;
}
#o_details{
font-size: 14px;
}
#track2 img{
width: 75%;
}
#details01, #details02{
font-size: 12px;
}
#o_items{
font-size: 14px;
}
#o_info{
font-size: 14px;
}
h1{
font-size: 20px;
}
.orders1 img, .orders2 img{
width: 80%;
}
.orders1, .orders2{
font-size: 12px;
}
#method{
font-size: 12px;
}
.o_conf img{
width: 70%;
}
#pers_sel p{
font-size: 12px;
}
.sTotal td,.sCost td,.tCost{
display:none;
}
#eButton{
padding: 5px 5px 5px 5px;
font-size: 12px;
}
}
</style>
<body>
<header>
<center>
<table class="table01" align="center" style="width:650px;border-collapse: collapse; ">
<tr>
<a href="#"><img src="./images/bracelate_03.jpg" alt="bracelate_03" /> </a>
</center>
</tr>
<tr id="extra01" style=" background-color: black;
color: white;
text-align: center;
border-color: black;
font-size: 12px;
font-weight:100;
">
<td id="oHours" style="padding-top: 5px; line-height: 0px;">
<p id="onlyh01" style="font-size: 16px; "> <b>48 HOURS ONLY</p></br>
<p id="onlyh02" style="font-weight: 500; font-size: 16px;">EXTRA 15% OFF YOUR NEXT ORDER | CODE : B15CK
</p>
</td>
</tr>
<tr id="confirmed" style="width:650px">
<th rowspan="2" style="padding-left:50px ;"><img src="./images/bracelate_07.jpg" alt="bracelate_07" /></th>
<td style="padding-left:10px ;">
<h1> YOUR ORDER IS CONFIRMED!</h1>
</td>
</tr>
<tr id="congrats">
<td style=" padding-top: 20px;
padding-bottom: 20px;">Congratulations %%firstname%%, you made a great choice </br>
We're excited to start working on your personalized jewelry. </br>
You will recieve a shipping notice as soon as it leaves our hand.
</td>
</tr>
<tr id="button1">
<td> <button id="btn1" style="padding:5px 40px 5px 40px; font-weight: bold; ">GET 15% OFF</button> </td>
</tr>
<tr id="track1" style="text-align: center;">
<td style="padding-top: 15px; padding-bottom:25px; font-size: 14px;"> <b><u>TRACK YOUR ORDER ></u></b> </td>
</tr>
<tr id="track2">
<td>
<center><img src="./images/bracelate_11.jpg" alt="bracelate_11" /> </center>
</td>
</tr>
</table>
<table class="oDetails" style="width:650px">
<tr id="o_details">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">Order
Details
</td>
</tr>
<tr id="details01">
<td style="padding-left:50px; padding-top:20px"> <u>Order Number:</u> 65224865 </td>
<tr id="details02">
<td style="padding-left:50px; padding-bottom:20px"> <u>Order Date:</u> 02/09/2018</td>
</tr>
<tr id="o_items">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">Ordered
Items
</td>
</tr>
<tr id="items01">
<td></td>
</tr>
</table>
<table class="orders1">
<tbody>
<tr>
<td rowspan="7" width="200"><b>
<img src="./images/bracelate_22.jpg" alt="bracelate_22" style="margin-bottom:40px" />
</b></td>
<td colspan="2" width="367" style="padding-top: 5px; padding-bottom: 15px;">Personalized Engraved
Mum Birthstone Neklace</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Material :</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Sterling Silver</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">1st Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#1</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">2nd Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#2</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Chain Length</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">45 cm chain - adult</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Price</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;"></td>
</tr>
<tr>
<td width="184" style="padding-top: 10px; padding-bottom: 10px; color:#ee9d86">Make Changes</td>
<td width="183" style="padding-top: 10px; padding-bottom: 10px;"></td>
</tr>
</tbody>
</table>
<table>
<tr id="divider2">
<td rowspan="2"><img src="./images/divider2.jpg" alt="divider2" /></td>
</tr>
</table>
<table class="orders2">
<tbody>
<tr>
<td rowspan="7" width="200"><b>
<img src="./images/Order_Confirmation_23.jpg" alt="Order_Confirmation_23" style="margin-bottom:40px"/>
</b></td>
<td colspan="2" width="367" style="padding-top: 5px; padding-bottom: 15px;">Personalized Engraved
Mum Birthstone Neklace</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Material :</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Sterling Silver</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">1st Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#1</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">2nd Inscription</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">Name#2</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Chain Length</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;">45 cm chain - adult</td>
</tr>
<tr>
<td width="184" style="padding-top: 5px; padding-bottom: 5px;">Price</td>
<td width="183" style="padding-top: 5px; padding-bottom: 5px;"></td>
</tr>
<tr>
<td width="184" style="padding-top: 10px; padding-bottom: 10px; color:#ee9d86">Make Changes</td>
<td width="183" style="padding-top: 10px; padding-bottom: 10px;"></td>
</tr>
</tbody>
</table>
<table style="width:650px">
<tbody>
<tr id="o_info">
<td style="font-weight: bold; padding :5px; padding-left: 50px ; background-color: #f3f3f3;">
Shipping Info</td>
</tr>
<tr>
<td style=" padding-left: 50px ; padding-top: 10px; padding-bottom: 20px; text-align: center; ">
<center> <button id="eButton"
style="padding: 5px 20px 5px 20px; background-color: white; display: flex; align-items: center;"><img
src="./images/bracelate_15.jpg" alt="bracelate_15" /> Estimated Delivery Date
<b>Thursday November 7</b> </button></center>
</td>
</tr>
<tr>
<td style=" padding-left: 50px ; "><u>Shipping Method:</u> </br>
</u>standard shipping – 10 business days – FREE
</td>
<tr>
<td id="method" style=" padding-left: 50px ; "><a href="#">Change Shopping Method</a></td>
</tr>
</tr>
<tr>
<td style=" padding-left: 50px ; padding-top: 20px;"><u>Shipping Address </br>
</u>Idania pérez </br>
3001 nw 15 st </br>
Miami, florida 33125 </br>
united states </br>
<a href="#"> Change Shopping Method</a></td>
</tr>
</tbody>
</table>
<table>
<tr id="divider">
<th rowspan="2"><img src="./images/divider.jpg" alt="divider" /></th>
</tr>
</table>
<table class="sTotal" style="width:650px;">
<tr>
<td id="stotal_1" style = "width:500px">Subtotal</td>
<td id="stotal_2" >89.80</td>
</tr>
</table>
<table class="sCost" style="width:650px;">
<tr>
<td id="scost_1"style = "width:500px">Shipping cost</td>
<td id="scost_2">Free of Charge</td>
</tr>
</table>
<table>
<tr id="divider2">
<td rowspan="2"><img src="./images/divider2.jpg" alt="divider2" /></td>
</tr>
</table>
<table class="tCost" style="width:650px;">
<tr>
<td id="tcost_1" style = "width:500px"><strong>Total Cost</strong></td>
<td id="tcost_2"><strong>89.80</strong></td>
</tr>
</table>
<table>
<tr id="bracelate_18">
<th rowspan="2"><img src="./images/bracelate_18.jpg" alt="bracelate_18" /></th>
<td>
</table>
<table >
<tr id="selected">
<td id="pers_sel" style="width: 650px; text-align: center;padding: 10px 0px 10px 0px; font-size: 18px;"> <p>Personally
Selected for %%firstname%%</p> </td>
</tr>
</table>
<table class="o_conf"style="width: 650px;">
<tbody>
<tr>
<td width="190" style="text-align: center;"><img src="./images/Order_Confirmation_21.jpg" alt="Order_Confirmation_21" /> <p style="text-align: center; font-weight: bold; text-decoration: underline; "> SHOP NOW ></p></td>
<td width="190"style="text-align: center;"><img src="./images/bracelate_22.jpg" alt="bracelate_22" /> <p style="text-align: center;font-weight: bold; text-decoration: underline; ">SHOP NOW ></p></td>
<td width="190" style="text-align: center;"><img src="./images/Order_Confirmation_23.jpg" alt="Order_Confirmation_23" /><p style="text-align: center;font-weight: bold; text-decoration: underline; ">SHOP NOW ></p></td>
</tr>
</tbody>
</table>
<tr>
<td id="btm_menu" width="650" style="padding-top: 30px;">
<table id="new_menue_2020" valign="middle" cellpadding="0" cellspacing="0" border="0" width="650"
align="center" bgcolor="#ffffff" style="padding: 0px 0px 0px; vertical-align: middle;">
<tbody>
<tr>
<td id="btm_menu_men_icon" bgcolor="#f3f3f3" width="222" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_men_icon_img" width="38"
src="./images/bracelate_27.jpg"></a>
</td>
<td id="btm_menu_men_text" bgcolor="#f3f3f3" width="372" align="left"
style="border-bottom: 3px solid #ffffff; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Jewelry for Him</a>
</td>
<td id="btm_menu_men_arrow" bgcolor="#f3f3f3" width="70" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_men_arrow_img" width="70"
src="./images/bracelate_29.jpg"> </a>
</td>
</tr>
<tr>
<td id="btm_menu_mom_icon" width="222" bgcolor="#f3f3f3" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_mom_icon_img" width="38"
src="./images/bracelate_36.jpg" ></a>
</td>
<td id="btm_menu_mom_text" width="372" bgcolor="#f3f3f3" align="left"
style="border-bottom: 3px solid #ffffff; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Jewelry for Her</a>
</td>
<td id="btm_menu_mom_arrow" width="70" bgcolor="#f3f3f3" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_mom_arrow_img" width="70"
src="./images/bracelate_29.jpg"></a>
</td>
</tr>
<tr>
<td id="btm_menu_kid_icon" bgcolor="#f3f3f3" width="222" align="right"
style="border-bottom: 3px solid #ffffff; padding: 0px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_kid_icon_img" width="38"
src="./images/bracelate_32.jpg"></a>
</td>
<td id="btm_menu_kid_text" bgcolor="#f3f3f3" width="358"
style="border-bottom: 3px solid #ffffff; vertical-align: middle; text-transform: uppercase; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 18px; padding-left: 13px;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
Best Sellers </a>
</td>
<td id="btm_menu_kid_arrow" bgcolor="#f3f3f3" width="70" align="right"
style="border-bottom: 3px solid #ffffff;">
<a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;">
<img id="btm_menu_kid_arrow_img" width="70"
src="./images/bracelate_29.jpg"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<table style="margin-top: 20px;">
</table>
<table
style="width:650px; margin: 30px, 0px, 30px, 0px; text-align: center; background-color:#f3f3f3; padding: 5px; line-height: 0px;">
<tbody>
<tr>
<tr>
<td style="border: 1px solid rgb(189, 188, 188)">
<p style="font-size: 18px;"> <i> Got a Question ?</i></p>
<p style="font-size: 14px;">Visit Our Help Center</p>
</td>
</tr>
</tr>
</tbody>
</table>
<table style="margin-top: 20px;">
</table>
<table>
<tr>
<td style="text-align:center; line-height: 5px;">
<h1 style="padding-bottom: 5px;">SUBSCRIBERS SAVE THE MOST!</h1>
<p> Sign up now for VIP access to exclusive offers, </p>
<p>giveaways and new jewellery launches</p>
</td>
</tr>
<tr id="button1">
<td> <button id="btn1" style="padding:5px 40px 5px 40px; font-weight: bold; ">SUBSCRIBE NOW</button>
</td>
</tr>
</table>
<table>
<tr id="divider">
<th rowspan="2"><img src="./images/divider.jpg" alt="divider" /></th>
<tr>
</table>
<table style="margin-top: 20px; line-height: 25px;">
<tr>
<td>This e-mail was sent from an automated system that is unable to accept incoming e-mails. <br> Please
do not reply to this e-mail.
<p style="line-height: 0rem; color: gray;">Copyright <a href="https://www.mynamenecklace.com/"
target="_blank" style="text-decoration: none; color: #3a4249;"> <u>MyNameNecklace. </u> </a> All rights reserved.</p>
</td>
</tr>
</table>
</center>
</header>
</body>
</html>