I'm trying to create a non-repeatable banner on my email with live text on top but it looks broken on Outlook.

Here's what I'm running into:
https://litmus.com/previews/public/e70a536

Code:


<table class="mktoModule section-hero hero-a" id="module-hero-all" mktoName="Hero with Button" width="100%" cellpadding="0" cellspacing="0" border="0" mktoAddByDefault="true">
                                    <tr class="one-col">
                                        <td class="feature-bg reset-height" background="http://na-sjh.marketo.com/rs/184-PGR-022/images/test_security_banner.jpg" bgcolor="696c71" width="100%" height="${hero-a-height}" valign="top" style="background-position:top center;background-size:cover;">                                         
                                            <!--[if gte mso 9]>
                                              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200">
                                                <v:fill type="tile" src="http://na-sjh.marketo.com/rs/184-PGR-022/images/test_security_banner.jpg" color="#696c71" />
                                                <v:textbox inset="0,0,0,0">
                                              <![endif]-->
                                          <div style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;">
                                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td class="hide border-left" width="40" style="border-left: solid 8pt #00c081;">&nbsp;</td>
                                                    <td class="hero-inner">
                                                        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="reset contents" style="font-size:14px;line-height:20px;text-align:left;color:${hero-a-text};">
                                                            <tr>
                                                                <td height="${hero-a-height}" class="reset-height" align="${horizontal-align}" valign="${vertical-align}" style="text-align:${horizontal-align};font-family:Helvetica,sans-serif;">
                                                                    <div class="spacer" style="mso-line-height-rule:exactly;height:30px;font-size:30px;line-height:30px;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;display:block;">&nbsp;</div>
                                                                    <div class="hero-a-links">
                                                                        <div class="mktEditable" id="hero-text" mktoName="Editable text" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;">
                                                                            <h1 style="margin-top:0;margin-right:0;margin-left:0;font-size:24px;line-height:25px;margin-bottom:8px;color:${hero-a-text};">Homines divitarium</h1>
                                                                            <p style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;">Pertinerent modi corpus depravatum quales amputata</p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="spacer" style="mso-line-height-rule:exactly;height:30px;font-size:30px;line-height:30px;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;display:block;">&nbsp;</div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td class="hide border-right" width="40" style="border-right: solid 8pt #00c081;">&nbsp;</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <!--[if mso]>
                                            </v:textbox>
                                            </v:fill>
                                            </v:rect>
                                        <![endif]-->
                                      </td>
                                    </tr>
                                </table>

I've tried mso-width-percent: 600 and 1000 and have run into issues.
Not sure what to do now.