Classes mismatch while using web preset plugin

Hello Everyone,

I am using website preset plugin however, when I drag column from grapes Demo page the styling is different and in my application the styling is different as follows.Am I missing anything?

**GrapesUI**

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
body{
  background-image:url(none);
  background-repeat:repeat;
  background-position:left top;
  background-attachment:scroll;
  background-size:auto;
}
.row{
  display:flex;
  justify-content:flex-start;
  align-items:stretch;
  flex-wrap:nowrap;
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;
}
.cell{
  min-height:75px;
  flex-grow:1;
  flex-basis:100%;
}
@media (max-width: 768px){
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
  .row{
    flex-wrap:wrap;
  }
}
@keyframes fadeEffect{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}


**My webpage**

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
*{
  box-sizing:border-box;
}
body{
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  margin-left:0px;
}
.now-row{
  display:table;
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;
  width:100%;
}
.now-cell{
  width:8%;
  display:table-cell;
  height:75px;
}
@media (max-width: 768px){
  .now-cell{
    width:100%;
    display:block;
  }
  .now-cell{
    width:100%;
    display:block;
  }
}

Warm regards
Milap