如何删除 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



                        &nbsp;
                    </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



                        &nbsp;
                    </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>