Outlook Disclaimer HTML

I am trying to make a disclaimer for external messages. I am having trouble with how Outlook is rendering the HTML though. Testing it via w3schools, it appears fine, as shown here:

Though, in Outlook it looks like this:

Here is the code I am using:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div style="background-color:#6385ce; border:3.5px solid #1e3679; padding:.5em; ">
  <span style="font-size:12pt;  font-family: 'Cambria','times new roman','garamond',serif; color:#FFFFFF;"><b>CAUTION:</b></span>
  <span style="font-size:10pt; font-family: 'Cambria','times roman',serif; color:#FFFFFF">This email originated from outside. Do not click on links, open attachments, or reply unless you recognize the sender as well as the domain. Follow guidelines for validating payment information with Wires, ACH, etc.
  </span>
  </div>

<!-- end snippet -->

Any idea what I can do to fix this? I have been messing with different styles but can't seem to get it to work in outlook.

Table tag is more safe than div in outlook.
and there's some outlook rule that use whole number, one font famly... etc.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  <table style="background:#6385ce; border:4px solid #1e3679; color:#fff; font-family: Cambria; font-size:10pt;">
    <tbody>
      <tr>
        <td style="padding:8px;">
          <strong style="font-size:12pt;">CAUTION:</strong> This email originated from outside. Do not click on links, open attachments, or reply unless you recognize the sender as well as the domain. Follow guidelines for validating payment information with Wires, ACH, etc.
        </td>
      </tr>
    </tbody>
  </table>

<!-- end snippet -->