JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <table class="data_container">
        <tr>
            <td style="height:400px">How can I fix my margins?</td>
        </tr>
    </table>
</div>

CSS

#container{
    box-sizing: border-box;
    overflow: scroll;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    padding: 50px;
    height: 100%;
    background: magenta;
}

.data_container{
    width: 100%;
    border-color: black;
    border-style: solid;
    border-width: 2px;
    background-color: white;
    font-size: smaller;
}