e-mail styling with limitations: gotchas to avoid?

I'm designing a simple e-mail for the amazon buyer-seller messaging system and it has quite a few limitations.

These are the allowed HTML and CSS tags - I can only do inline-styling as everything else gets stripped. Allowed HTML and CSS tags

This is an example of what I've got.

<html>
<body style="font-family: Helvetica, montserrat; margin: 0% 10% 0% 10%;">
    <div style="background-color: whitesmoke; text-align: center;">
        <h1 style="padding: 25px"><span style="color: #5cb811;">BRAND</span><span style="color: white">NAME</span></h1>
    </div>
    <div style="padding: 0% 5% 0% 5%;">
        <div class="delivery-box" style="padding: 10px; text-align: center; margin: 0% 10% 0% 10%;">
            <div style="border: 1px solid whitesmoke;">
            <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <h2>At vero eos et accusamus!</h2>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Sed ut perspiciatis unde omnis. </p>
        <p>dolor sit amet.</p>
    </div>
</body>
</html>

My question isn't with regards to the design (it's mediocre at best), but rather if there's anything I should be aware of as these e-mails are likely going to be viewed by a number of different devices and I'm not sure how I can assess what it's gonna look like using different e-mail providers and devices? Are there any typical practices that trip people up on this that I should avoid? I'm not sure how to get the margins done nicely (I want a lot of whitespace around the text and edges) and look more or less similar on any device. I just went with padding and margin that's based on a percentage, hoping that would do the trick, but I'm not sure how well that actually works?

Tags: