html - Content overlapping on 480px media query -

i'm using bootstrap 3 , have grid of... description cards if will. thing set height them in order not push columns in undesireable way due content of 1 being larger content of another. works expected issue comes when viewport size gets less 480px, content starts overlap, as shown in image (sorry being in spanish) tried change height auto in (max-width: 480px) doesn't seem job. weird since worked similar grid made.

hope snippet can serve in way.

thanks lot in advance.

@media (max-width: 480px) {    .navbar-toggle .icon-bar {      width: 35px;      margin-bottom: 9px;    }    .navbar-default .navbar-toggle:hover,    .navbar-default .navbar-toggle:focus {      background-color: transparent;    }    .navbar-default .navbar-toggle:hover .icon-bar {      background-color: black;    }    .navbar-default .navbar-toggle:focus {      background-color: transparent;    }    .navbar-toggle {      border: 0px;      margin-top: 35px;      margin-right: 30px;      width: 50px;      height: 50px;    }    .navbar-brand {      margin-bottom: 10px;      -webkit-transform: translatex(50%);      transform: translatex(50%);    }    .power_logo {      height: 50px;    }    .second_title {      font-family: 'montserrat', sans-serif;      text-align: center;      color: #7d1424;    }    .jumbosubtext {      margin-top: 50px;      color: white;      margin-bottom: 60px;    }    .locker {      height: auto;    }    /*-------------------------------------------------------------------------------------------------*/    .firstsection {      background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;      background-size: cover;      background-attachment: fixed;      height: auto;    }  }  @media (max-width: 767px) {    .navbar-toggle .icon-bar {      width: 35px;      margin-bottom: 9px;    }    .navbar-default .navbar-toggle:hover,    .navbar-default .navbar-toggle:focus {      background-color: transparent;    }    .navbar-default .navbar-toggle:hover .icon-bar {      background-color: black;    }    .navbar-default .navbar-toggle:focus {      background-color: transparent;    }    .navbar-toggle {      border: 0px;      margin-top: 35px;      margin-right: 30px;      width: 50px;      height: 50px;    }    .navbar-brand {      margin-bottom: 10px;      margin-left: 240px;    }    .power_logo {      height: 50px;    }    .second_div {      margin-bottom: 90px;    }    .second_title {      text-align: center;      color: #7d1424;    }    .third_text {      color: #830024;      font-family: 'montserrat', sans-serif;      font-weight: bolder;      font-size: 300%;      margin-top: 100px;    }    .locker {      height: 300px;    }    .featurelocker {      height: 500px;    }    /*-------------------------------------------------------------------------------------------------*/    .firstsection {      padding-top: 50px;      background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;      background-size: cover;      background-attachment: fixed;      height: 600px;    }  }  /*laptop*/    @media (max-width: 991px) {    .navbar-toggle .icon-bar {      width: 35px;      margin-bottom: 9px;    }    .navbar-default .navbar-toggle:hover,    .navbar-default .navbar-toggle:focus {      background-color: transparent;    }    .navbar-default .navbar-toggle:hover .icon-bar {      background-color: black;    }    .navbar-default .navbar-toggle:focus {      background-color: transparent;    }    .navbar-toggle {      border: 0px;      margin-top: 35px;      margin-right: 30px;      width: 50px;      height: 50px;    }    .navbar-brand {      margin-bottom: 10px;      margin-left: 240px;    }    .power_logo {      height: 50px;    }    .navbar-brand {      padding-top: 0;      margin: 15px 30px;    }    .second_title {      text-align: center;      color: #7d1424;      margin-bottom: 20px;    }    .locker {      height: 300px;    }    .featurelocker {      height: 500px;    }    /*-------------------------------------------------------------------------------------------------*/    .firstsection {      background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;      background-size: cover;      background-attachment: fixed;      height: 600px;    }  }  @media (max-width: 1199px) {    .power_logo {      width: 150px;      height: 70px;    }    .nav li {      height: 100px;    }    .nav li {      line-height: 80px;      font-size: 18px;    }    body {      margin-top: 100px;    }    .jumbotext {      margin-top: 50px;    }    .second_title {      text-align: center;      color: #7d1424;    }    .logo {      margin-top: 15px;      margin-left: 20px;      max-height: 85px;      max-width: 200px;    }    .featurelocker {      height: 500px;    }    /*-------------------------------------------------------------------------------------------------*/    .firstsection {      margin-top: 50px;      background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;      background-size: cover;      background-attachment: fixed;      height: 600px;    }  }  /* large desktop */    @media (min-width: 1200px) {    .power_logo {      width: 150px;      height: 70px;    }    .nav li {      height: 100px;    }    .nav li {      line-height: 80px;      font-size: 18px;    }    body {      margin-top: 100px;    }    .logo {      margin-top: 5px;      margin-left: 15px;      max-height: 90px;      max-width: 250px;    }    .locker {      height: 300px;    }    .featurelocker {      height: 500px;    }    /*-------------------------------------------------------------------------------------------------*/    .firstsection {      padding-left: 50px;      padding-top: 200px;      background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;      background-size: cover;      background-attachment: fixed;      height: 700px;    }  }

<div class="row">    <div class="col-xs-12">      <h1 class="third_text center-block">al escojer power exterminators obtiene</h1>    </div>      <div class="col-md-6 col-lg-4 ">      <div class="featurelocker">        <img src="images/call.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">        <h1 class="features">esmerada atención para usted</h1>        <h3 class="subfeatures">possumus aliqua deserunt laborum. commodo firmissimum possumus, admodum legam                               o offendit praetermissum ab sunt non quid ex quo sunt vidisse instituendarum.</h3>      </div>    </div>    <div class="col-md-6  col-lg-4 ">      <div class="featurelocker">        <img src="images/technician.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">        <h1 class="features">equipo técnico altamente capacitado</h1>        <h3 class="subfeatures">possumus aliqua deserunt laborum. commodo firmissimum possumus, admodum legam                               o offendit praetermissum ab sunt non quid ex quo sunt vidisse instituendarum.</h3>      </div>    </div>    <div class="col-md-6  col-lg-4 ">      <div class="featurelocker">        <img src="images/tree_yellow.svg " style="height: 150px; width: 150px;" class="img-responsive   center-block">        <h1 class="features">productos seguros al medio ambiente</h1>        <h3 class="subfeatures">possumus aliqua deserunt laborum. commodo firmissimum possumus, admodum legam                               o offendit praetermissum ab sunt non quid ex quo sunt vidisse instituendarum.</h3>      </div>    </div>    <div class="col-md-6  col-lg-4">      <div class="featurelocker">        <img src="images/prize_yellow.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">        <h1 class="features">calidad garantizada</h1>        <h3 class="subfeatures">possumus aliqua deserunt laborum. commodo firmissimum possumus, admodum legam                               o offendit praetermissum ab sunt non quid ex quo sunt vidisse instituendarum.</h3>      </div>    </div>    <div class="col-md-6 col-md-offset-3 col-lg-4">      <div class="featurelocker">        <img src="images/on_time.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">        <h1 class="features">puntualidad</h1>        <h3 class="subfeatures">possumus aliqua deserunt laborum. commodo firmissimum possumus, admodum legam                               o offendit praetermissum ab sunt non quid ex quo sunt vidisse instituendarum.</h3>      </div>    </div>  </div>

figured out, since wanted set specific, unchanging height description cards, did instead of adding <div class="featurelocker"> inside col-**-* bootstrap divs, added class col-**-* bootstrap div, because, setting height wouldn't affect horizontal responsiveness of divs. seems be solution particular problem if facing similar issue. thank help!