HTML Email With Tables Nesting

I'm writing some html code to make an html email. I've done some research and I found that using old school html, such as tables etc is the best way to do this. After all your help

Solution 1:

The .icons td is aligned hard left (when the viewport is less than 400px wide) because it has no padding or margin on it, whereas your other content (h1, p) has 26px margin-right.

You could address this by applying 26px of padding-left to .icons. This will make the left-hand edge of .icons align with the content above it.

BUG #2, ATTEMPT 2:

After reviewing the demo link you provided in your comment, I can see the problem you describe and its cause: your content is wider than its containing element.

You have set an explicit width for all paragraphs of 320px, which makes the .iconwrapper wider than it is supposed to be. I don't think you need to set a paragraph width, so just remove that CSS declaration.

(My suggestion when debugging these sort of layout issues is to use the developer tools in chrome to inspect your HTML elements and look how CSS styles are being applied. I find it really helps me to visualise my code, and see how it affects the layout.)