Respon.css

body {
    margin: 0px;
    color: rgb(240, 12, 209);
    font-weight: 600;
    /* /* /* Change this if you would add things inside */
    /* /* /* Change this if you would add things inside */
    /* /* /* Change this if you would add things inside */
}
div.in {
    margin: 4px;
}
div {
    text-align: center;
}
div.header{
    width: 100%;
    background-color: skyblue;
    height: 90px;
    margin-bottom: 4px;
}
div.header,.Side-bar,.main-content,.Extra-content,.footer {padding-top: 3%;}
div.three{
    width: 100%;
}
div.three .Side-bar{
    width: 30%;
    background-color: green;
    float: left;
    height: 320px;
}
div.main-content , div.Extra-content{
    float: right;
}
div.main-content{
    height: 202px;      /*8px*/
    background-color: yellow;
    width: 68%;
}
div.Extra-content{
    height: 68px;
    background-color: grey;
    width: 68%;
}
div.footer{
    margin-top: 372px;
    height: 68px;
    background-color: orange;

}
       /*tablet*/
@media screen and (max-width: 1110px){
    div.Extra-content{
        height: 80px;}
    div.footer{
        margin-top: 383px;
    }}
@media screen and (max-width: 887px) {
    div.Extra-content{
        width: 100%;}
    div.main-content{
        width: 49%;
        height: 320px;}
    div.three .Side-bar{
            width: 49%;}
    div.footer{
        margin-top: 480px;
    }}
/* mobile */
@media screen and (max-width: 857px) {
    div.footer{
        margin-top: 834px;
    }
    div.main-content{
        width: 100%;   
}
div.three .Side-bar{
    width: 100%;
}}