wondering if this is a browser bug?
Having a div with background red, then inside a div with display: flex; margin-top: 1rem;
leaves a white margin, instead of red. Removing display: flex
OR adding some content before flex solves the issue.
<body style="margin: 0;">
<div style="background: #400; height: 500px;">
<!-- adding a here makes the top part #400 too, as it should be -->
<div style="background: #080; margin-top: 1rem; display: flex; ">test2</div>
</div>
</body>