JSFiddle - React, Tailwind, and code Playground

HTML

<div id="encase">
    <div id="topNav">
        <p> topNav </p>
    </div>
    <div id="header">
        <p> header</p>
    </div>

    <div id="wholeBody">
        <div id="sideNav">
            <p> sideNav </p>
        </div>
        <div id="body1">
            <p> body1 </p>
        </div>
    </div>

    <div id="footer">
        <p> footer </p>
    </div>
</div>

CSS

<style>
#encase {
width: 100%;
height: 100%; 
margin-left: auto;
margin-right: auto;
}
#header {
background-color:black;
width: 1490px;
height:110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#topNav {
background-color:green;
width: 1490px;
height: 50px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#wholeBody {
background-color: red;
width: 1490px;
height: 690px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
float: left;
}
#body1 {
background-color: purple;
width: 1180px;
height: 690px;
    /*margin-left: 16%;*/
padding: 5px;
float:left;
}
#footer {
background-color: blue;
width: 1490px;
height: 110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
</style>