I've been experimenting with creating a grid layout based on the instructions from w3schools. Unfortunately, I am facing an issue where all the rows span 100% across the viewport no matter what combinations of columns I try. I have created multiple rows with different column placements, but nothing seems to fix the problem.
For reference, here is a Codepen link to the code.
<div class="row">
<div class="col-6, sec1">Content</div>
<div class="col-6, sec2">Content</div>
</div>
[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%;}
}