JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div style="clear:both"></div>
    <div id="footer"></div>
</div>

CSS

/*in this fiddle, I removed position:relative and left:10% from all the css styles */

html, body {
    padding:0px;
    margin:0;
    width:100%;
}
#container {
    width:80%;
    margin:0 auto;
}
div {
    border-radius: 5px;
    border-collapse: collapse;
    margin:0px
}
#header {
    z-index: 1;
    position: fixed;
    width: 80%;
    height: 60px;
    background-color: #000028;
    margin: auto;
}
#left {
    width: 40%; /* changed from 20% */
    height: 1500px;
    background-color: #B9D7D9;
    z-index: 2;
    float: left;
    top: 60px;

}
#right {
    width: 60%;
    z-index: 0;
    height: 1500px;
    background-color: #4AB7FF;
    float: right;
    right: 10%;
    top: 60px;
}
#footer {
    height: 50px;
    background-color: #668284;
    width: 80%;
    z-index: 3;
    bottom:0;
    left:10%;
}