JSFiddle - React, Tailwind, and code Playground

HTML

<div id="adContainer">
            <div id="headerWrapper">
                <!--
                stuff will go here
                -->
            </div>
            <div id="adSubContainer">
                <!--
                stuff will go here
                -->
            </div>
        </div>

CSS

* { margin: 0; padding: 0;}

#adContainer {
    width: 100%;
    height: 100%;
    max-height: 939px;
    background-color: red;
    position: absolute;
}

#adContainer > img {max-width: 100%;}

    #adContainer > #headerWrapper {
        width: 81.25915081%;
        height: 6.88622754%;
        margin: 0 auto;
        background-color: #333333;
    }
        
    #adContainer > #adSubContainer {
        width: 81.25915081%;
        height: 70.35928144%;
        background-color: #333333;
        /*margin: 0 auto;*/ /* 2.99401198% */
        margin:20px;
    }