In chrome my columns not working properly

Question

i am using columns in Firefox working fine

and in chrome not working perfect

Michael Coker · Answer 1 · 2017-03-28T17:03:50.023

Remove display: inline from .col-sm-3

.stu-li-heading {
  color: #c89647;
  font-size: 20px;
  font-weight: 300;
  margin: 0;
  padding: 14px 0 12px;
}

.student-gall-list.border-effect li:nth-child(1) {
  float: left;
  width: 66.6%;
  height: 140px;
  overflow: hidden;
}

.student-gall-list.border-effect li:nth-child(1) img {
  min-height: 140px;
}

.student-gall-list.border-effect li {
  background: #222222 none repeat scroll 0 0;
  float: left;
  height: 70px;
  width: 33.2%;
  overflow: hidden;
}

.student-gall-list.border-effect li img {
  min-height: 70px;
}

.student-gall-list.border-effect li:nth-child(4),
.student-gall-list.border-effect li:nth-child(5),
.student-gall-list.border-effect li:nth-child(6) {
  width: 33.333%;
  position: relative;
}

.gallery-more-no h3 {
  font-weight: 300;
  margin: 0;
  width: 100%;
}

.stu-list-tags {
  display: inline-block;
  padding: 0 10px 12px;
  width: 100%;
}

.student-gall-list {
  padding: 0;
}

.student-gall-list.border-effect li img {
  width: 100%;
}

.student-gall-list figure img {
  width: 100%;
}

.gallery-more-no {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  color: #ffffff;
  align-items: center;
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  display: flex;
}

.block-width.gallery-grid-st {
  columns: 4 auto;
}

.col-sm-3-add.in-view {
  animation: myfirst 1.5s linear alternate;
  -webkit-animation: myfirst 1.5s linear alternate;
}


.col-sm-3-add > *:last-child {
  margin-bottom: 20px;
}

@-webkit-keyframes myfirst {
  from {
    opacity: 0;
    transform: translate3d(0px, 150%, 0px);
    -weblit-transform: translate3d(0px, 150%, 0px);
  }
  to {
    opacity: 1;
    transform: translate3d(0px, 0%, 0px);
    -weblit-transform: translate3d(0px, 0px, 0px);
  }
}

.student-page-banner {
  background: rgba(0, 0, 0, 0) url("../img/banner-student-page.jpg") no-repeat scroll center center;
}

.middle-pop.modal .modal-dialog {
  align-items: center;
  display: flex !important;
  height: 100%;
}

.center-model-cover {
  background: #fff;
  position: relative;
  width: 100%;
}

.model-student-gallery .modal-dialog {
  margin: 0 auto;
  line-height: 0;
}

.slider-student-p {
  margin: 0 0 0 -15px;
}

.detail-slider-pop {
  margin: 0 0 0 -15px;
}

.com-name span {
  border-radius: 50%;
  display: inline-block;
  float: left;
  height: 34px;
  margin: 0 8px 0 0;
  overflow: hidden;
  width: 34px;
}

.com-name span img {
  min-height: 34px;
}

.com-name {
  color: #444;
  font-size: 17px;
  line-height: 34px;
  margin: 40px 0 20px;
}

.detail-slider-pop p {
  color: #888888;
  font-size: 13px;
  line-height: 22px;
}

.close-btn svg {
  fill: #333333;
  width: 22px;
}

.close-btn {
  line-height: 0;
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 20;
}

.list-img-s img {
  width: 100%;
}

.slider-student-p .owl-buttons .owl-prev,
.slider-student-p .owl-buttons .owl-next {
  color: #000000;
  font-size: 0;
  left: 8px;
  position: absolute;
  top: 48%;
  z-index: 100;
}


/*************************** add nomber list 2***************************/

.padding-add-0 {
  padding: 0px;
}

.student-gall-sec-img-st li {
  display: flex;
  float: left;
  min-height: 167px;
  position: relative;
  width: 50%;
  overflow: hidden;
}

.student-gall-sec-img-st li img {
  height: 100%;
  max-width: inherit;
  padding: 0;
  position: absolute;
}

.add-list-s-set3 li:last-child {
  min-height: 100px !important;
  overflow: hidden;
  width: 100%;
}

.add-list-s-set3 li:last-child img {
  height: auto;
  max-width: 100%;
}

<div class="container">
  <div class="block-width gallery-grid-st animation-section">


    <div class="col-sm-3-add in-view">
      <a data-toggle="modal" data-target=".student-gallery-popup2">
        <div class="student-gall-list border-effect">
          <ul>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
            <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img">
              <div class="gallery-more-no">
                <h3> +2 </h3></div>
            </li>
          </ul>
          <div class="stu-list-tags">
            <h4 class="stu-li-heading">ONGC Batch 2017</h4>
            <p> #mercurydiaries &nbsp; #corporatebatch &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
          </div>
        </div>
      </a>
    </div>


    <div class="col-sm-3-add in-view">
      <div class="student-gall-sec-img-st padding-add-0 border-effect">
        <ul>
          <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
          <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
        </ul>

        <div class="stu-list-tags">
          <h4 class="stu-li-heading">ONGC Batch 2017</h4>
          <p> #mercurydiaries &nbsp; #corporatebatch &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
        </div>
      </div>
    </div>




    <div class="col-sm-3-add in-view">
      <div class="student-gall-list border-effect">
        <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
        <div class="stu-list-tags">
          <h4 class="stu-li-heading">ONGC Batch 2017</h4>
          <p> #mercurydiaries &nbsp; #corporatebatch &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
        </div>
      </div>
    </div>

    <div class="col-sm-3-add in-view">

      <div class="student-gall-list border-effect">
        <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
        <div class="stu-list-tags">
          <h4 class="stu-li-heading">ONGC Batch 2017</h4>
          <p> #mercurydiaries &nbsp; #corporatebatch &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
        </div>
      </div>

    </div>






  </div>
</div>

thanks for replaying . if you have same other option it's batter to me — lalit bhakuni, Mar 28 '17 at 05:51
@Nito oh I see. It's only at certain widths, and it seems to be because of the margin on `.col-sm-3`. I added a bottom margin to the last child of that col `.col-sm-3-add > *:last-child { margin-bottom: 20px; }` which should work better. — Michael Coker, Mar 28 '17 at 17:05

score 0 · Answer 2 · edited May 23 '17 at 10:30

~~Add display:flex to .block-width.gallery-grid-st. Works here, with browsers prefixes.~~

.stu-li-heading {
 color: #c89647;
 font-size: 20px;
 font-weight: 300;
 margin: 0;
 padding: 14px 0 12px;
}
.student-gall-list.border-effect li:nth-child(1) {
 float: left;
 width: 66.6%;
 height: 140px;
 overflow: hidden;
}
.student-gall-list.border-effect li:nth-child(1) img {
 min-height: 140px;
}
.student-gall-list.border-effect li {
 background: #222222 none repeat scroll 0 0;
 float: left;
 height: 70px;
 width: 33.2%;
 overflow: hidden;
}
.student-gall-list.border-effect li img {
 min-height: 70px;
}
.student-gall-list.border-effect li:nth-child(4), .student-gall-list.border-effect li:nth-child(5), .student-gall-list.border-effect li:nth-child(6) {
 width: 33.333%;
 position: relative;
}
.gallery-more-no h3 {
 font-weight: 300;
 margin: 0;
 width: 100%;
}
.stu-list-tags {
 display: inline-block;
 padding: 0 10px 12px;
 width: 100%;
}
.student-gall-list {
 padding: 0;
}
.student-gall-list.border-effect li img {
 width: 100%;
}
.student-gall-list figure img {
 width: 100%;
}
.gallery-more-no {
 background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
 color: #ffffff;
 align-items: center;
 height: 100%;
 left: 0;
 position: absolute;
 text-align: center;
 top: 0;
 width: 100%;
 display: flex;
}
.col-sm-3-add {
 margin: 0 0 20px;
}
.block-width.gallery-grid-st {
  display: flex;
  -webkit-columns: 4 auto;
  -moz-columns: 4 auto;
 columns: 4 auto;
}
.col-sm-3-add {
 display: inline-block;
 margin: 0 0 20px;
 width: 100%;
}
.col-sm-3-add.in-view {
 animation: myfirst 1.5s linear alternate;
 -webkit-animation: myfirst 1.5s linear alternate;
}
 @-webkit-keyframes myfirst {
 from {
opacity:0;
transform: translate3d(0px, 150%, 0px);
-weblit-transform: translate3d(0px, 150%, 0px);
}
to {
 opacity: 1;
 transform: translate3d(0px, 0%, 0px);
 -weblit-transform: translate3d(0px, 0px, 0px);
}
}
.student-page-banner {
 background: rgba(0, 0, 0, 0) url("../img/banner-student-page.jpg") no-repeat scroll center center;
}
.middle-pop.modal .modal-dialog {
 align-items: center;
 display: flex !important;
 height: 100%;
}
.center-model-cover {
 background: #fff;
 position: relative;
 width: 100%;
}
.model-student-gallery .modal-dialog {
 margin: 0 auto;
 line-height: 0;
}
.slider-student-p {
 margin: 0 0 0 -15px;
}
.detail-slider-pop {
 margin: 0 0 0 -15px;
}
.com-name span {
 border-radius: 50%;
 display: inline-block;
 float: left;
 height: 34px;
 margin: 0 8px 0 0;
 overflow: hidden;
 width: 34px;
}
.com-name span img {
 min-height: 34px;
}
.com-name {
 color: #444;
 font-size: 17px;
 line-height: 34px;
 margin: 40px 0 20px;
}
.detail-slider-pop p {
 color: #888888;
 font-size: 13px;
 line-height: 22px;
}
.close-btn svg {
 fill: #333333;
 width: 22px;
}
.close-btn {
 line-height: 0;
 position: absolute;
 right: 10px;
 top: 0;
 z-index: 20;
}
.list-img-s img {
 width: 100%;
}
.slider-student-p .owl-buttons .owl-prev, .slider-student-p .owl-buttons .owl-next {
 color: #000000;
 font-size: 0;
 left: 8px;
 position: absolute;
 top: 48%;
 z-index: 100;
}

/*************************** add nomber list 2***************************/
.padding-add-0 { padding: 0px;}
.student-gall-sec-img-st li {
 display: flex;
    float: left;
 min-height: 167px;
    position: relative;
    width: 50%;
 overflow: hidden;
}
.student-gall-sec-img-st li img {
    height: 100%;
    max-width: inherit;
    padding: 0;
    position: absolute;
}
.add-list-s-set3 li:last-child {
    min-height: 100px !important;
    overflow: hidden;
    width: 100%;
}
.add-list-s-set3 li:last-child img{ height:auto;max-width: 100%; 
}

<div class="container">
  <div class="block-width gallery-grid-st animation-section">
  
  
  <div class="col-sm-3-add in-view">
   <a data-toggle="modal" data-target=".student-gallery-popup2">
  <div class="student-gall-list border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"> <div class="gallery-more-no"> <h3> +2 </h3></div></li>
  </ul>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </a>
  </div>
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
  
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-list border-effect">
  <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  
  <div class="student-gall-list border-effect">
  <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  
  </div>
  
  
  
  
  
  
  </div>
  </div>

Source

Update: use this code:

.block-width.gallery-grid-st {
  display: flex;
  flex-wrap: wrap;
}
.col-sm-3-add {
  flex: 1 0 25%;
    margin: 0 0 20px;
    width: 100%;
}

.stu-li-heading {
 color: #c89647;
 font-size: 20px;
 font-weight: 300;
 margin: 0;
 padding: 14px 0 12px;
}
.student-gall-list.border-effect li:nth-child(1) {
 float: left;
 width: 66.6%;
 height: 140px;
 overflow: hidden;
}
.student-gall-list.border-effect li:nth-child(1) img {
 min-height: 140px;
}
.student-gall-list.border-effect li {
 background: #222222 none repeat scroll 0 0;
 float: left;
 height: 70px;
 width: 33.2%;
 overflow: hidden;
}
.student-gall-list.border-effect li img {
 min-height: 70px;
}
.student-gall-list.border-effect li:nth-child(4), .student-gall-list.border-effect li:nth-child(5), .student-gall-list.border-effect li:nth-child(6) {
 width: 33.333%;
 position: relative;
}
.gallery-more-no h3 {
 font-weight: 300;
 margin: 0;
 width: 100%;
}
.stu-list-tags {
 display: inline-block;
 padding: 0 10px 12px;
 width: 100%;
}
.student-gall-list {
 padding: 0;
}
.student-gall-list.border-effect li img {
 width: 100%;
}
.student-gall-list figure img {
 width: 100%;
}
.gallery-more-no {
 background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
 color: #ffffff;
 align-items: center;
 height: 100%;
 left: 0;
 position: absolute;
 text-align: center;
 top: 0;
 width: 100%;
 display: flex;
}
.col-sm-3-add {
 margin: 0 0 20px;
}
.block-width.gallery-grid-st {
  display: flex;
  flex-wrap: wrap;
}
.col-sm-3-add {
  flex: 1 0 25%;
 margin: 0 0 20px;
 width: 100%;
}
.col-sm-3-add.in-view {
 animation: myfirst 1.5s linear alternate;
 -webkit-animation: myfirst 1.5s linear alternate;
}
 @-webkit-keyframes myfirst {
 from {
opacity:0;
transform: translate3d(0px, 150%, 0px);
-weblit-transform: translate3d(0px, 150%, 0px);
}
to {
 opacity: 1;
 transform: translate3d(0px, 0%, 0px);
 -weblit-transform: translate3d(0px, 0px, 0px);
}
}
.student-page-banner {
 background: rgba(0, 0, 0, 0) url("../img/banner-student-page.jpg") no-repeat scroll center center;
}
.middle-pop.modal .modal-dialog {
 align-items: center;
 display: flex !important;
 height: 100%;
}
.center-model-cover {
 background: #fff;
 position: relative;
 width: 100%;
}
.model-student-gallery .modal-dialog {
 margin: 0 auto;
 line-height: 0;
}
.slider-student-p {
 margin: 0 0 0 -15px;
}
.detail-slider-pop {
 margin: 0 0 0 -15px;
}
.com-name span {
 border-radius: 50%;
 display: inline-block;
 float: left;
 height: 34px;
 margin: 0 8px 0 0;
 overflow: hidden;
 width: 34px;
}
.com-name span img {
 min-height: 34px;
}
.com-name {
 color: #444;
 font-size: 17px;
 line-height: 34px;
 margin: 40px 0 20px;
}
.detail-slider-pop p {
 color: #888888;
 font-size: 13px;
 line-height: 22px;
}
.close-btn svg {
 fill: #333333;
 width: 22px;
}
.close-btn {
 line-height: 0;
 position: absolute;
 right: 10px;
 top: 0;
 z-index: 20;
}
.list-img-s img {
 width: 100%;
}
.slider-student-p .owl-buttons .owl-prev, .slider-student-p .owl-buttons .owl-next {
 color: #000000;
 font-size: 0;
 left: 8px;
 position: absolute;
 top: 48%;
 z-index: 100;
}

/*************************** add nomber list 2***************************/
.padding-add-0 { padding: 0px;}
.student-gall-sec-img-st li {
 display: flex;
    float: left;
 min-height: 167px;
    position: relative;
    width: 50%;
 overflow: hidden;
}
.student-gall-sec-img-st li img {
    height: 100%;
    max-width: inherit;
    padding: 0;
    position: absolute;
}
.add-list-s-set3 li:last-child {
    min-height: 100px !important;
    overflow: hidden;
    width: 100%;
}
.add-list-s-set3 li:last-child img{ height:auto;max-width: 100%; 
}

<div class="container">
  <div class="block-width gallery-grid-st animation-section">
  
  
  <div class="col-sm-3-add in-view">
   <a data-toggle="modal" data-target=".student-gallery-popup2">
  <div class="student-gall-list border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"> <div class="gallery-more-no"> <h3> +2 </h3></div></li>
  </ul>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </a>
  </div>
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
  
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-list border-effect">
  <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  
  <div class="student-gall-list border-effect">
  <figure> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt=""> </figure>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  
  </div>
  
  
  
  
  
  
  </div>
  </div>

JSfiddle

In chrome my columns not working properly

2 Answers2