.container  {
        width: 100%;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
    }

    @media (min-width: 1200px) {
          .container {
          max-width: 1200px;
          margin-top: 0px;
            }
        }

    .row::after {
        content: "";
        clear: both;
        display: block;
        text-align: center;
        align-items: center;
    }
    [class*="col-"] {
        float: left;
        padding: 10px;
    }
 
    .col-l1 {width: 8.33%;}
    .col-l2 {width: 16.66%;}
    .col-l3 {width: 25%;}
    .col-l4 {width: 33.33%;}
    .col-l5 {width: 41.66%;}
    .col-l6 {width: 50%;}
    .col-l7 {width: 58.33%;}
    .col-l8 {width: 66.66%;}
    .col-l9 {width: 75%;}
    .col-l10 {width: 83.33%;}
    .col-l11 {width: 91.66%;}
    .col-l12 {width: 100%;}

    @media only screen and (max-width: 768px){
    .col-m1 {width: 8.33%;}
    .col-m2 {width: 16.66%;}
    .col-m3 {width: 25%;}
    .col-m4 {width: 33.33%;}
    .col-m5 {width: 41.66%;}
    .col-m6 {width: 50%;}
    .col-m7 {width: 58.33%;}
    .col-m8 {width: 66.66%;}
    .col-m9 {width: 75%;}
    .col-m10 {width: 83.33%;}
    .col-m11 {width: 91.66%;}
    .col-m12 {width: 100%;}

    }

    @media only screen and (max-width: 480px) {
      
    .col-s1 {width: 8.33%;}
    .col-s2 {width: 16.66%;}
    .col-s3 {width: 25%;}
    .col-s4 {width: 33.33%;}
    .col-s5 {width: 41.66%;}
    .col-s6 {width: 50%;}
    .col-s7 {width: 58.33%;}
    .col-s8 {width: 66.66%;}
    .col-s9 {width: 75%;}
    .col-s10 {width: 83.33%;}
    .col-s11 {width: 91.66%;}
    .col-s12 {width: 100%;}
    }