I've been trying to experiment with a grid layout, after following w3schools guide on how to make a grid layout. No matter what I do, all the rows display 100% across the viewport. I've made a number of rows and divided them up with different column combinations and nothing will work.

A [Codepen link](https://codepen.io/aaronstran/pen/MWwYpVd) of the code.

```html
<div class="row">
    <div class="col-6, sec1">Content</div>
    <div class="col-6, sec2">Content</div>
</div>

```

```css
[class*="col-"] {
    width:100%;
    float:left;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (min-width:768;){
    /*Desktops*/
    .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%;}
}

```