JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="content">
        Content into
    </div>
</div>

CSS

#container {
    display:block;
    width:300px;
    margin:auto;
    background:green;
}

#content {
    display:block;
    margin:20px; /* here is wrong */
    /******************************
    ** Margin:
    ** - left/right: inside #container
    ** - top/bottom: outside #container (WRONG)
    **
    ** Why is this happening?
    ** The margin of #content must be all inside
    ** #container.
    */
    background:yellow;
}