JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<div class="container">
<div class="contentleft">
Content in the left
</div>

<div class="contentright">
Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    But wheres the space between the div-container and the top border in the sticky footer?
</div>
</div>
</div>

<div class="footer">
Sticky footer
</div>

CSS

html, body {height: 100%;}
.wrap { min-height: 100%; }
.footer
{
 	width:798px;
	border-top: 2px solid #2E181A;
	clear: both;
	padding: 5px 0 0 0;
	background-color: inherit;
	text-align: center;
	bottom:0;
	background-color: #E6D9BD;
	position:relative;
	height: 30px;
	margin: -37px auto 0 auto;
	z-index:30;
}
.container
{
 	width: 788px;
 	margin: 0px auto 0px auto;
 	padding: 0px 0px 30px 0px;
	border:5px solid #2E181A;
 	background-color: #E6D9BD;
	position:relative;
	    content: " "; /* 1 */
    display: table; /* 2 */
    overflow: auto;
}
.contentleft
{

	background-color: inherit;
	margin:5px 10px 10px 10px;
	padding:10px 5px 30px 5px;
	float:left;
	overflow: auto;
	width: 300px;
		display:block;
}
.contentright
{

	background-color: inherit;
	margin:5px 0px 10px 10px;
	border:0px solid #2E181A;
	padding:10px 5px 30px 5px;
	float:left;
	overflow: hidden;
	width: 420px;
	display:block;
}