What I'm trying to do is pretty simple, just have three tables under three separate headings, all on the same page. But as you can see (if you try the code), the margins are all whacky. Why isn't this code working?

<div style="text-align: left; height: 900px; background-color: lightgrey;">
            
            <h1 style="margin-top: 100px; background-color: lightgreen;">blank</h1>
            <table border="1" align="left" style="text-align: left;">
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
            </table>
            
            
            <h1 style="margin-top: 100px; background-color: lightgreen;">blank</h1>
            <table border="1" align="left" style="text-align: left;">
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
            </table>
            
            
            <h1 style="margin-top: 100px; background-color: lightgreen;">blank</h1>
            <table border="1" align="left" style="text-align: left;">
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
                <tr>
                    <td>blank</td>
                    <td>blank</td>
                </tr>
            </table>    
    </div>

Thanks for helping!

Finally figured it out! I needed to remove the align="left" tags.

align="left" ATTRIBUTES