full-width mj-wrapper break rendering on outlook desktop

Describe the bug Hi, I have got problem with mj-wrapper on Outlook 2016 and Outlook 2013 120 DPI whole email content is on the left site. On other clients it works fine. When i delete mj-wrapper email backs to normal (center). (2) And background is repeating when repeating is set to none.

To Reproduce

<mjml>
    <mj-body width="600">
        <mj-wrapper full-width="full-width" background-url="https://cdn2.hubspot.net/hubfs/3297259/OnBoarding/Welcome%20Email/back.png"
            padding-bottom="0" background-repeat="no-repeat">


            <mj-section text-align="center" padding-bottom="30px">

                <mj-column>
                    <mj-image align="center" src="http://placekitten.com/130/42" width="132px" height="42px"></mj-image>
                    <mj-text padding="20px" padding-top="30px" color="#ffffff" font-family="Roboto,Arial" align="center"
                        font-size="55px" line-height="55px" letter-spacing="-2px" font-weight="700">
                        Welcome to the family!
                    </mj-text>


                    <mj-text padding="20px" color="#ffffff" font-family="Roboto,Arial" align="center" font-size="18px"
                        line-height="20px" letter-spacing="0">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to m
                    </mj-text>

                    <mj-image align="center" border="none" padding-bottom="0px" src="http://placekitten.com/200/100"
                        title="" width="400px" href=""></mj-image>


                </mj-column>

            </mj-section>



            <mj-section background-color="white" padding-bottom="10px">
                <mj-column>
                    <mj-text color="black" font-family="Roboto,Arial" align="center" font-size="16px" line-height="20px"
                        letter-spacing="0">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to m
                    </mj-text>
                    <mj-spacer height="20px"> </mj-spacer>
                    <mj-image src="http://placekitten.com/230/100" width="230px" height="50px">
                    </mj-image>

                    <mj-spacer height="10px"> </mj-spacer>


                    <mj-text color="black" font-family="Roboto,Arial" align="center" font-size="16px" line-height="20px"
                        letter-spacing="0">

                        <span><a style="color:#F43C7B">Learn how to install </a></span>
                    </mj-text>



                </mj-column>

            </mj-section>


            <mj-section padding-top="0px">

                <mj-column width="40%" background-color="#FFFFFF">
                    <mj-image src="http://placekitten.com/216/150" width="216px" alt="" align="center" border="none"></mj-image>
                </mj-column>
                <mj-column width="60%" vertical-align="middle">
                    <mj-spacer height="35px"></mj-spacer>
                    <mj-text padding="25px" color="black" font-family="Roboto,Arial" align="left" font-size="16px"
                        line-height="20px" letter-spacing="0px">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to m
                    </mj-text>

                </mj-column>




            </mj-section>


            <mj-section>


                <mj-column vertical-align="middle">

                    <mj-text color="#303F9F" font-family="Roboto, cursive,Roboto,Arial" align="center" font-size="34px"
                        line-height="40px" font-weight="700" padding-left="40px" padding-right="40px">Lorem Ipsum is
                    </mj-text>


                </mj-column>




            </mj-section>

            <mj-section padding-bottom="0px">


                <mj-column vertical-align="middle">

                    <mj-text color="black" font-family="Roboto,Arial" align="left" font-size="16px" line-height="20px">Best
                        regards, </br>
                    </mj-text>


                </mj-column>




            </mj-section>



            <mj-section vertical-align="top" padding-top="0px" padding-left="0px" padding="0px 0px 0px 0px" full-width="full-width">

                <mj-column width="600px" padding="0px 0px 0px 0px" background-color="white">

                    <mj-image align="center" border="none" padding-bottom="0px" padding-left="0px" padding-right="0px"
                        padding="0px 25px" src="http://placekitten.com/780/500" title="" width="600px"></mj-image>
                </mj-column>
            </mj-section>


            <mj-section padding-top="40px" text-align="center">
                <mj-column>
                    <mj-image src="http://placekitten.com/230/100" width="80px" height="26px"></mj-image>

                    <mj-text font-family="Arial" font-size="12px" line-height="16px" color="#939eb4">
                        <p style="line-height: 16px; text-align: center; margin: 10px 0;font-size:12px;color:#939eb4;font-family:'Roboto',Arial,sans-serif">Copyright
                            © 2018 {{ site_settings.company_name }}, All rights reserved. </br>


                            {{ site_settings.company_street_address_1 }}&nbsp;<br /> {{ site_settings.company_city
                            }}&nbsp; {{ site_settings.company_state }}&nbsp; {{ site_settings.company_zip }}&nbsp; {{
                            site_settings.company_country }}&nbsp;
                            </br>
                            Want to change how you receive these emails?<br /> You can <a href="{{ unsubscribe_link }}"
                                target="_blank" style="text-decoration:underline; color:#939eb4;">update your
                                preferences</a> or <span class="em_br"></span><a href="{{unsubscribe_link_all}}" target="_blank"
                                style="text-decoration:underline; color:#939eb4;">unsubscribe from this list</a>.</p>
                    </mj-text>
                </mj-column>



            </mj-section>



        </mj-wrapper>

    </mj-body>
</mjml>

Expected behavior Content: center. Background-repeat: none

MJML environment (please complete the following information):

• OS: Windows
• MJML Version 4.1.2
• MJML tool used MJML App 2.10.0

Affected email clients (for rendering issues):

• Email Client Office 2016, Office 2019, Outlook 2013 120 DPI
• OS: Windows 7

Screenshots

https://ibb.co/j8ZxwV https://ibb.co/feGXVq

[iRyusa]

Editing the title to reflect the issue

[realb0t]

Hello! I got the same problem (content is on the left side in Outlook 2016/2019) if using mj-wrapper for background with full-width.

Does this problem have a workaround?

We used css class for mj-body with background-image property and not used mj-wrapper (in Outlook background not displayed but the content have normal view). But I think it’s not a best solution.

UPD:

All work fine if disabled blocking autoload images in Outlook settings