MJML Not outputting correctly in outlook

Question

I have the following MJML:

 <mjml>
  <mj-body background-color="#f2f8f9">
    <mj-section background-color="#77c5d5" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-image src="https://www.test.com/white-logo.png" alt="logo" align="center" border="none" width="200px" padding-left="0px" padding-right="0px" padding-bottom="10px" padding-top="10px"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="25px">Nieuwe vrijwilligers vacatures</mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF" padding-bottom="20px">
      <mj-column vertical-align="top" width="100%">
        <mj-text align="left" color="#000000" font-size="18px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
          <span style="color:#000000">Dag John,</span>
        </mj-text>
        <mj-text align="left" color="#000000" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
          Er zijn enkele vrijwilligersvacatures bij jou in de buurt, die passen bij jouw interesse. 
Bekijk even of het iets voor jou is! Je kan ze ook doorsturen naar vrienden. Het zou echt top zijn als ze geholpen kunnen worden
<br/><br/>
          Je kan je buurten en interesses voor een betere matching steeds veranderen in je profiel.
        </mj-text>
        <mj-button align="center" href="https://www.google.be" font-size="18px" font-weight="bold" background-color="#77c5d5" border="2px solid #D9E9EB;" color="#ffffff" font-family="open Sans Helvetica, Arial, sans-serif">Zoek vrijwilligerswerk!</mj-button>
      </mj-column>
    </mj-section>
    
  <mj-section background-color="#FFFFFF">
    <mj-column vertical-align="top" width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
        <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="15px" padding-top="15px">Nieuwe vacatures gevonden voor jou</mj-text>
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-image height="125px"src="https://test.com/vacancies/2568/banner-picture_1900.webp"></mj-image>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica, Arial, sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          Dag- of nachtoppas in BREE
      </mj-button>
      <mj-text padding-bottom="0">Antwerpen (2000)</mj-text>
      <mj-text padding-bottom="0">Begeleiding</mj-text>
      <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
      <mj-text padding-top="0">Jongeren</mj-text>
    </mj-column>
    <mj-column width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
    </mj-column>
      <mj-column vertical-align="top" width="50%">
        <mj-image height="125px"src="https://test.com/vacancies/2568/banner-picture_1900.webp"></mj-image>
      </mj-column>
      <mj-column vertical-align="top" width="50%">
        <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica, Arial, sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          Vrijwilliger voor administratieve hulp aan huis
         </mj-button>
        <mj-text padding-bottom="0">Antwerpen (2000)</mj-text>
        <mj-text padding-bottom="0">Begeleiding</mj-text>
        <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
        <mj-text padding-top="0">Jongeren</mj-text>
      </mj-column>
    <mj-column vertical-align="top" width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
        <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="15px" padding-top="15px">Andere interessante vacatures</mj-text>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-image height="125px"src="https://test.com/vacancies/13333/banner-picture_1900.webp"></mj-image>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica, Arial, sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          CALM pour une cohabitation interculturelle
      </mj-button>
      <mj-text padding-bottom="0">Brussel (1000)</mj-text>
      <mj-text padding-bottom="0">Begeleiding</mj-text>
      <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
      <mj-text padding-top="0">Jongeren</mj-text>
    </mj-column>
    </mj-section>
    <mj-section padding-bottom="0px" padding-top="0">
      <mj-column width="100%">
        <mj-image src="https://www.test.be/design/img/email-footer-no-clouds.png" alt="footer"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="middle" width="100%">
        <mj-social font-size="14px" icon-size="25px" mode="horizontal">
          <mj-social-element name="facebook" href="https://www.facebook.com/test.be"></mj-social-element>
          <mj-social-element name="instagram" href="https://www.instagram.com/test.be/"></mj-social-element>
          <mj-social-element  name="linkedin" href="https://www.linkedin.com/company/test"></mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text align="center" font-size="10px" padding-top="0">Copyright 2021 - test. Alle rechten voorbehouden.</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This renders perfectly in outlook web and gmail. But in outlook client (and Windows mail) the layout is just all next to each other, as seen here:

What could be the issue?

Answer 1

I managed to solve the issue by adding <mj-section>'s around every single row in my MJML code and it rendered perfectly in outlook client.