Выравнивание становится неправильным для промежутка

Question

Я использую html для создания шаблона электронной почты, в котором у меня есть кнопки с гиперссылками, проблема в том, что когда электронная почта достигает gmail или yahoo, кнопки выравниваются по левому краю, а остальная часть текста становится с правой стороны. Это же письмо работает правильно в Outlook. У меня есть 3 кнопки Зарегистрироваться, чтобы зарегистрироваться, Войти и Отказаться. Которые в основном теги обернуты aroud span.

Попытка проверки разметки

<table class="nl-container" style="table-layout: fixed; vertical-align: top; min-width: 320px; Margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #FFFFFF; width: 100%;" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#FFFFFF" valign="top">
    <tbody>
        <tr style="vertical-align: top;" valign="top">
            <td style="word-break: break-word; vertical-align: top;" valign="top">
                <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color:#FFFFFF"><![endif]-->
                <div style="background-color:transparent;">
                    <div class="block-grid " style="Margin: 0 auto; min-width: 320px; max-width: 500px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: transparent;">
                        <div style="border-collapse: collapse;display: table;width: 100%;background-color:transparent;">
                            <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:500px"><tr class="layout-full-width" style="background-color:transparent"><![endif]-->
                            <!--[if (mso)|(IE)]><td align="center" width="500" style="background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
                            <div class="col num12" style="min-width: 320px; max-width: 500px; display: table-cell; vertical-align: top; width: 500px;">
                                <div style="width:100% !important;">
                                    <!--[if (!mso)&(!IE)]><!-->
                                    <div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
                                        <!--<![endif]-->
                                        <div class="img-container center  autowidth " align="center">
                                            <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="" align="center"><![endif]--><img class="center  autowidth " align="center" border="0" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/d1f87f67-8c84-477b-b422-7d4a4c01195d/00D220000004e5NEAQ/AHPA_Email_Logo.png" alt="Image" title="Image" style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 230px; display: block;" width="230"/>
                                            <!--[if mso]></td></tr></table><![endif]-->
                                        </div>
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <div style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #555555;">
                                                <p style="font-size: 14px; line-height: 16px; margin: 0;">&nbsp;</p>
                                            </div>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <div style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #555555;">
                                                <p style="font-size: 14px; line-height: 16px; margin: 0;"><span style="font-size: 13px; mso-ansi-font-size: 14px;">Hello {!Employee.FirstName},</span></p>
                                            </div>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <div style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #555555;">
                                                <p style="font-size: 14px; line-height: 15px; margin: 0;"><span style="font-size: 13px; mso-ansi-font-size: 14px;"><apex:outputLabel value="{!$Label.Employers_initiating_Enrollment_for_Employees_Welcome_Email_Para1}"></apex:outputLabel> </span></p>
                                        </div>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <div style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #555555;">
                                                 <p style="font-size: 12px; line-height: 14px; color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;"><strong><span style="font-size: 13px; line-height: 15px; mso-ansi-font-size: 14px;"><apex:outputLabel value="{!$Label.Employers_initiating_Enrollment_for_Employees_Welcome_Email_Para1_line2}"></apex:outputLabel> </span></strong></p>
                                            </div>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:4px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <div style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #555555;">
                                                <ul>
                                                <li style="font-size: 12px; line-height: 14px;"><span style="font-size: 13px; line-height: 15px; mso-ansi-font-size: 14px;"><apex:outputLabel value="{!$Label.Employers_initiating_Enrollment_for_Employees_Welcome_Email_Para2_line1}"></apex:outputLabel> </span></li>
                                                <li style="font-size: 12px; line-height: 14px;"><span style="font-size: 13px; line-height: 15px; mso-ansi-font-size: 14px;"><apex:outputLabel value="{!$Label.Employers_initiating_Enrollment_for_Employees_Welcome_Email_Para2_line2}"></apex:outputLabel> </span></li>
                                                <li style="font-size: 12px; line-height: 14px;"><span style="font-size: 13px; line-height: 15px; mso-ansi-font-size: 14px;"><apex:outputLabel value="{!$Label.Employers_initiating_Enrollment_for_Employees_Welcome_Email_Para2_line3}"></apex:outputLabel></span></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <div style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #555555;">
                                                <p style="font-size: 12px; line-height: 14px; margin: 0;"><strong><span style="font-size: 13px; line-height: 15px; mso-ansi-font-size: 14px;"><apex:outputLabel value="{!$Label.Login_to_Caryn}"></apex:outputLabel> </span></strong></p>
                                            </div>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:0px;padding-left:10px;">
                                            <div style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #555555;">
                                                 <p style="font-size: 12px; line-height: 15px; margin: 0;"><span style="font-size: 13px; mso-ansi-font-size: 14px;">First, create your CarynHealth login by clicking the “Register to Enroll” button below and taking these steps:</span></p>
                                            </div>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:0px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                             <div style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 1.2; color: #555555; mso-line-height-alt: 14px;">
                                                <ol>
                                                    <li style="font-size: 12px; line-height: 14px;"><apex:outputLabel value="{!$Label.Label_Emp_Initiation_Point_one}"></apex:outputLabel> </li>
                                                    <li style="font-size: 12px; line-height: 14px;"><apex:outputLabel value="{!$Label.Label_Emp_Initiation_Point_Two}"></apex:outputLabel></li>
                                                    <li style="font-size: 12px; line-height: 14px;"><apex:outputLabel value="{!$Label.Label_Emp_Initiation_Point_Three}"></apex:outputLabel></li>
                                                 </ol>
                                            </div>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:0px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <p style="font-size: 12px; line-height: 15px; color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;"><span style="font-size: 13px; mso-ansi-font-size: 14px;"><apex:outputLabel value="{!$Label.Affiliate_Onboarding_Employers_Welcome_Email_Para_4}"></apex:outputLabel> </span></p>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <p style="font-size: 12px; line-height: 15px; color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;"><span style="font-size: 13px; mso-ansi-font-size: 14px;">Message from Employer : {!Employee.Account.Enrollment_Message__c}</span></p>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <div class="button-container" align="left" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px" align="left"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{!$Label.Employee_Dependent_Signup}" style="height:25.5pt; width:120.75pt; v-text-anchor:middle;" arcsize="12%" stroke="false" fillcolor="#E0813A"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:15px"><![endif]--><a href="{!$Label.Employee_Dependent_Signup}" target="_blank" style="-webkit-text-size-adjust: none; text-decoration: none; display: inline-block; color: #ffffff; background-color: #E0813A; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; width: auto; border-top: 1px solid #E0813A; border-right: 1px solid #E0813A; border-bottom: 1px solid #E0813A; border-left: 1px solid #E0813A; padding-top: 5px; padding-bottom: 5px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none; word-break: keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:15px;display:inline-block;">
                                                    <span style="font-size: 16px; a-height: 32px;"><span style="font-size: 15px; line-height: 21px;">Register to Enroll</span></span>
                                                </span></a>
                                            <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->
                                        </div>
                                        <div class="button-container" align="left" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px" align="left"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{!$Label.Employee_Portal_Login}" style="height:25.5pt; width:120.75pt; v-text-anchor:middle;" arcsize="12%" stroke="false" fillcolor="#E0813A"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:15px"><![endif]--><a href="{!$Label.Employee_Portal_Login}" target="_blank" style="-webkit-text-size-adjust: none; text-decoration: none; display: inline-block; color: #ffffff; background-color: #E0813A; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; width: auto; border-top: 1px solid #E0813A; border-right: 1px solid #E0813A; border-bottom: 1px solid #E0813A; border-left: 1px solid #E0813A; padding-top: 5px; padding-bottom: 5px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none; word-break: keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:15px;display:inline-block;">
                                                    <span style="font-size: 16px; line-height: 32px;"><span style="font-size: 15px; line-height: 21px;">Login</span></span>
                                                </span></a>
                                            <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->
                                        </div>
                                        <div class="button-container" align="left" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                            <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px" align="left"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{!$Label.Employee_Opt_Out_Link}?id={!Employee.Id}" style="height:25.5pt; width:74.25pt; v-text-anchor:middle;" arcsize="12%" stroke="false" fillcolor="#3AAEE0"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:15px"><![endif]--><a href="{!$Label.Employee_Opt_Out_Link}?id={!Employee.Id}" target="_blank" style="-webkit-text-size-adjust: none; text-decoration: none; display: inline-block; color: #ffffff; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; width: auto; border-top: 1px solid #3AAEE0; border-right: 1px solid #3AAEE0; border-bottom: 1px solid #3AAEE0; border-left: 1px solid #3AAEE0; padding-top: 5px; padding-bottom: 5px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none; word-break: keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:15px;display:inline-block;">
                                                    <span style="font-size: 16px; line-height: 32px;"><span style="font-size: 15px; line-height: 19px;">Opt Out</span></span>
                                                </span></a>
                                            <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->
                                        </div>
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                        <div style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
                                             <p style="font-size: 12px; line-height: 14px; color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">
                                                    Questions? <br/>
                                                    Contact: {!Employee.Account.CreatedBy.Name} <br/>
                                                    Email: {!Employee.Account.CreatedBy.Email} &nbsp;<br/>
                                                    <apex:outputLabel value="Phone: "  rendered="{!Employee.Account.CreatedBy.Phone != null}"/> <apex:outputLabel value="{!Employee.Account.CreatedBy.Phone}" rendered="{!Employee.Account.CreatedBy.Phone != null}" />&nbsp;<br/>
                                                    <apex:outputLabel value="Mobile: "  rendered="{!Employee.Account.CreatedBy.MobilePhone != null}"/>
                                                     {!Employee.Account.CreatedBy.MobilePhone} &nbsp;<br/>

                                            </p>
                                                <p style="font-size: 12px; line-height: 14px; margin: 0;">&nbsp;</p>
                                                <p style="font-size: 12px; line-height: 14px; margin: 0;">And thank you!</p>
                                                <p style="font-size: 12px; line-height: 14px; margin: 0;">&nbsp;</p>
                                                <p style="font-size: 12px; line-height: 14px; margin: 0;">Sincerely,</p>
                                                <p style="font-size: 12px; line-height: 14px; margin: 0;">{!Employee.Account.CreatedBy.Name} </p>
                                        </div>
                                        <!--[if mso]></td></tr></table><![endif]-->
                                        <!--[if (!mso)&(!IE)]><!-->
                                    </div>
                                    <!--<![endif]-->
                                </div>
                            </div>
                            <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
                            <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                        </div>
                    </div>
                </div>
                <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
            </td>
        </tr>
    </tbody>
</table>
<!--[if (IE)]></div><![endif]-->