/*
  The first thing we're going to add is a global reset and box-sizing rule.
  This will make sure that padding applied to our elements is added within their
  calculated dimensions, giving us far more freedom for defining column widths.
*/
  
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
  
ul {
  margin: 0;
  padding: 0;
}
  
/*
  ALL IMAGES
  Next we'll add a rule to make sure any images used behave fluidly.
*/
img {
  width: auto;
  max-width: 100%;
  height: auto !important;
}
  
/*
  THE WRAPPER
  Now some rules to make sure our wrapper element behaves itself.
*/
.wrapper {
  width: 100%;
  margin: 0 auto;
}
  
/*
  THE ROWS
  All our row elements do is contain the columns,
  making sure that groups of columns clear each other properly.
  Let's add some general .clearfix rules to our wrapper and row elements.
*/
  
.wrapper:after,
.row:after {
  content: "";
  display: table;
  clear: both;
}
  
/*
  THE COLUMNS
  We're going to have a range of column classes,
  depending on the size of each one.
  For example .column-1 and .column-6.
  Let's use an attribute selector to target and
  style all of these in one go.
*/
  
[class^="col-"] {
  float: left;
  padding: 0;
  width: 100%;
  min-height: 1px;
}
  
 
  .col-1  { width: 8.333333334%; }
  .col-2  { width: 16.666666667%; }
  .col-3  { width: 25% ; }
  .col-4  { width: 33.333333334%; }
  .col-5  { width: 41.666666666%; }
  .col-6  { width: 50%; }
  .col-7  { width: 58.3333333333%; }
  .col-8  { width:66.6666666667%; }
  .col-9  { width: 75%; }
  .col-10 { width:83.3333333333%; }
  .col-11 { width:91.6666666667%; }
  .col-12 { width: 100%; }