* { box-sizing: border-box; }
    body { margin: 20px; font-family: sans-serif; }

    html, body {
        height: 100%;
    }

    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }

    [class*="col-"] {
        float: left;
        padding: 5px; 
    }

    .inner-box {
        border: 3px solid red;
        width: 100%;
        height: 100%;
    }

    .flush {
        padding: 0 !important;
    }

    .h-top { height: 100px; }
    .h-split { height: 100px; }
    .h-middle { height: 210px; } 
    .h-bottom { height: 150px; }


    .h-sidebar { height: 490px; }


 
.main-container {
    width: 100%;        
    max-width: 100%;   
    margin: 0;         
    border: 3px solid red;
    overflow: hidden;
    padding: 0; 
}


    .wrapper-reset { 
        padding: 0 !important; 
        margin: 0 !important; 
    }

@media screen and (max-width: 750px) {
            
            [class*="col-"] {
                width: 100%;
                float: none;
                padding: 5px; 
            }


            .col-2.flush {
                padding: 0 !important;
            }

            .h-sidebar {
                height: 4px; 
            }
            

        }