Почему не срабатывает медиазапрос?

Написал разметку для короткой новости, все работает как хотел, но когда вставляю в медиазапрос float: none; при 590px ширине экрана заголовок, текст и дата по прежнему обтекают картинку, причем когда пробовал воспроизвести все в codepen, отмена обтекания страбатывала, и все отображалось без обтекания, также хорошо работал старый образец короткой новости который был в шаблоне по примеру которого я и делал, какие могут быть причины того что на сайте это не работает?

вот проблемный образец:

HTML

<div class="news_two ">
  <a href="{full-link}">
    <figure>
      [xfgiven_image][xfvalue_image][/xfgiven_image] 
    </figure>
    <div style="overflow:hidden;">
    <div class="title">{title}</div>
    <div class="shortstory">{short-story limit="200"}...</div>
    <div class="info">
        <span><i class="fa fa-clock-o"></i> {date=d F, Y}</span>
        <span><i class="fa fa-comments-o"></i> {comments-num}</span>
        <span><i class="fa fa-eye"></i> {views}</span>
      </div>
    </div>
  </a>
</div>

CSS

.news_two a {
  position: relative;
  display: block;
  width: 100%;
  float: none;
  margin-right: 15px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e1e1e1;
}
/* line 833, ../sass/style.sass */
.news_two a:hover img {
  -moz-transform: scale(1.15);
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}
/* line 837, ../sass/style.sass */
.news_two a figure {
  position: relative;
  margin-right: 10px;
  float: left;
  overflow: hidden;
}
/* line 842, ../sass/style.sass */
.news_two a figure img {
  width: 270px;
  height: 160px;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
/* line 848, ../sass/style.sass */
.news_two a figure .score {
  font-size: 1.8rem;
  top: 100px;
  left: 15px;
  background: #41c961;
  display: inline;
  padding: 7px 10px;
  text-shadow: none;
  font-weight: 400;
  margin-right: 5px;
  color: white;
  z-index: 2;
  position: absolute;
}
/* line 861, ../sass/style.sass */
.news_two a figure .play {
  position: absolute;
  color: white;
  top: 15px;
  left: 7px;
  font-size: 1.8rem;
  opacity: 0.8;
  padding: 0 10px;
}
/* line 869, ../sass/style.sass */
.news_two a .title {
  color: black;
  font-weight: 500;
  margin-bottom: 17px;
  font-size: 1.3rem;
  line-height: 1.6rem;
}
/* line 875, ../sass/style.sass */
.news_two a .title:hover {
  color: #41c961;
}
/* line 879, ../sass/style.sass */
.news_two a .info span {
  color: #989898;
  margin-right: 5px;
  display: inline-block;
  font-size: 0.9rem;
}
/* line 884, ../sass/style.sass */
.news_two a .info span .fa {
  margin-right: 3px;
}
/* line 886, ../sass/style.sass */
.news_two a .shortstory {
  color: #666666;
  margin-bottom: 15px;
  line-height: 1.4rem;
}
@media screen and (max-width: 590px) {
.news_two a figure {margin-right: 0;float: none;margin-bottom: 10px;}
    .news_two a figure img {width: 100%;height: auto;}
}

А вот старый образец, в котором все было хорошо:

HTML

<div class="news-item clearfix">
    <a class="news-item-img img-box" href="{full-link}">

         [xfgiven_image][xfvalue_image][/xfgiven_image] 
    </a>
    <div class="news-item-date">{date=d F Y, l}</div>
    <a class="news-item-title" href="{full-link}">{title}</a>
    <div class="news-item-text">{short-story limit="150"}...</div> 
    <a class="news-link icon-l" href="{full-link}"><span class="fa fa-angle-double-right"></span>Читать далее</a>

</div>

CSS

.news-item {padding-left:0;}
.news-item + .news-item {margin-top:20px; padding-top:20px; border-top:1px solid #e3e3e3;}
.news-item-img {float:left;margin-left:0;  display:block; width:300px; height:160px;}
.news-item-date {opacity:0.6; margin-bottom:5px; font-size:12px;padding-left:20px;}
.news-item-title {display:block; font-size:18px; font-weight:700; margin-bottom:10px;padding-left:20px;}
.news-item-text {opacity:0.6; margin-bottom: 10px;padding-left:20px;}
.news-item-img:hover {opacity:0.8;}
.news-link {padding-left:20px;}
@media screen and (max-width: 590px) {
.news-item {padding-left:0;}
.news-item-img {float: none; margin:0 auto 0px auto; width: 100%; height: 100%;}
.news-item-date {opacity:0.6; margin-bottom:5px; font-size:12px;padding-left:10px;padding-top:15px;}
.news-item-title {display:block; font-size:18px; font-weight:700; margin-bottom:10px;padding-left:10px;}
.news-item-text {opacity:0.6; margin-bottom: 10px;padding-left:10px;}
.news-link {padding-left:10px;}
}

Немогу понять, что делаю неправильно, ведь повторил все как в работающем образце и в codepen все работает как надо