<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="vitrin-urun vitrin-sec"> <div class="sec-bd"> <ul class="vitrin-urun-list list-4 full-img "> <li> <a target="" href="#" class="item" > <img src="https://i01.appmifile.com/webfile/globalimg/zixuanz/PC-TR-SCOOTER.jpg?width=612&height=612" alt=""> </a> </li> <li> <a target="" href="#" class="item" > <img src="https://i01.appmifile.com/webfile/globalimg/zixuanz/PC-TR-TWS.jpg?width=612&height=612" alt=""> </a> </li> <li> <a target="" href="#" class="item" > <img src="https://i01.appmifile.com/webfile/globalimg/zixuanz/PC-TR-BOX.jpg?width=612&height=612" alt=""> </a> </li> <li> <a target="" href="#" class="item" > <img src="https://i01.appmifile.com/webfile/globalimg/Cindy/TR/4.jpg?width=612&height=612" alt=""> </a> </li> </ul> </div> </div> </div>

.vitrin-sec { width: 1226px; margin-right: auto; margin-left: auto; } .vitrin-sec:after, .vitrin-sec:before { content: " "; display: table } .vitrin-sec:after { clear: both } .vitrin-sec .sec-bd { margin-bottom:0px; } .vitrin-sec .sec-hd { width: 1226px; margin-right: auto; margin-left: auto; position: relative; margin: 68px 104px 40px; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: unset } .vitrin-sec .sec-hd:after, .vitrin-sec .sec-hd:before { content: " "; display: table } .vitrin-sec .sec-hd:after { clear: both } .vitrin-sec .sec-hd .sec-fontline { width: 1226px; height: 1px; background-color: #e0e0e0; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; display: inline-block } .vitrin-sec .sec-hd .sec-title { display: inline-block; font-size: 30px; font-weight: 300; color: #616161; text-transform: uppercase; line-height: 30px; margin: 0 38px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0 } .vitrin-sec .sec-hd:after, .vitrin-sec .sec-hd:before { width: 0!important } .vitrin-urun .vitrin-urun-list { width: 612px; height: 580px; } .vitrin-urun .vitrin-urun-list>li { float: left; margin: 0 2px 2px 0; overflow: hidden; transition: box-shadow .2s linear; background:url('../img/blob-shape (2).svg') #fafafa; } .vitrin-urun .vitrin-urun-list>li:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, .18) } .vitrin-urun .vitrin-urun-list.list-4>li:nth-child(1) { width: 612px; height: 580px } .vitrin-urun .vitrin-urun-list.list-4>li:nth-child(2), .vitrin-urun .vitrin-urun-list.list-4>li:nth-child(3) { width: 305px; height: 289px } .vitrin-urun .vitrin-urun-list.list-4>li:nth-child(3) { margin-right: 0 } .vitrin-urun .vitrin-urun-list.list-4>li:nth-child(4) { width: 612px; height: 289px; margin-right: 0 }