Адаптивные баннера, один ряд едет(

[newjey]

Добрый день.

Делаю адаптивные баннера в несколько рядов таким вот образом:

<style>
img:hover {
  opacity: 0.8;
}
.net_wrap {
    margin: 0px auto;
    max-width: 100%;
}
.net_wrap2 {
    text-align: center;
	}
.net_img {
    margin: 20px auto;
    max-width: 100%;
	margin-left: 10px;
}
</style>
<div class="row">
	<div></div>

<div><div class="row net_wrap">
<div class="net_wrap2 col-xs-12 col-sm-12 col-md-12 col-lg-12">
<a href="#"><img class="net_img" src="/image/catalog/category/goforkid.jpg"></a>
</div>
<div class="net_wrap2 col-xs-12 col-sm-4 col-md-4 col-lg-4">
<a href="#"><img class="net_img" src="/image/catalog/category/clothing-banner.jpg"></a>
</div>
<div class="net_wrap2 col-xs-12 col-sm-8 col-md-8 col-lg-8">
<a href="#"><img class="net_img" src="/image/catalog/category/pram.jpg"></a>
</div>
<div class="net_wrap2 col-xs-12 col-sm-8 col-md-8 col-lg-8">
<a href="#"><img class="net_img" src="/image/catalog/category/textile.jpg"></a>
</div>
<div class="net_wrap2 col-xs-12 col-sm-4 col-md-4 col-lg-4">
<a href="#"><img class="net_img" src="/image/catalog/category/child-room.jpg"></a>
</div>
<div class="net_wrap2 col-xs-12 col-sm-12 col-md-12 col-lg-12">
<a href="#"><img class="net_img" src="/image/catalog/category/toys.jpg"></a>
</div>
</div>
</div>
</div>

Третий ряд немного лезет, не могу понять почему так происходит.

Может кто подскажет что не так с кодом? Все фото одинакового размера.