Есть блок, нужно что бы он немного отступал от края страницы( справа и слева), но я стыкаюсь с такой проблемой, что margin-right и padding-right вообще не работают, а margin-left и padding-left лишь немного отступают. Пыталась применить правило как для всего контейнера, так и для блоков "item" отдельно(их мне и нужно сместить к центру)
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
dots: false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:4
}
}
});
.conteiner4{
text-align: center;
padding-top: 95px;
padding-bottom: 95px;
}
.fermashop{
position: relative;
}
.maining-ferma{
display: inline-block;
text-align: center;
margin-top: 48px;
width: 220px;
border:1px solid gray;
padding:35px;
margin-left: 30px;
padding-right: 30px;
}
.buttons div{
position: absolute;
font-size: 60px;
z-index: 1;
}
.buttons div.customPrevBtn{
left: 0;
top: 50%;
}
.buttons div.customNextBtn{
right: 0;
top: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="conteiner4">
<h2>ЗАКАЖИТЕ СВОЮ МАЙНИНГ-ФЕРМУ!</h2>
<div class="fermashop">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="maining-ferma">
<img src="asseets/img/ferma1.jpg">
<p class="description">Mining Rig "ACRONYM" for Ethereum 170 Mh\s</p>
<p class="old-price">12 000 грн
<span>8 000 грн</span></p>
<a class="action" href="#" >ПОДРОБНЕЕ</a>
</div>
</div>
<div class="item">
<div class="maining-ferma">
<img src="asseets/img/ferma1.jpg">
<p class="description">Mining Rig "ACRONYM" for Ethereum 170 Mh\s</p>
<p class="price">12 000 грн</p>
<a href="#">ПОДРОБНЕЕ</a>
</div>
</div>
<div class="item">
<div class="maining-ferma">
<img src="asseets/img/ferma1.jpg">
<p class="description">Mining Rig "ACRONYM" for Ethereum 170 Mh\s</p>
<p class="old-price">12 000 грн
<span>8 000 грн</span></p>
<a class="action" href="#" >ПОДРОБНЕЕ</a>
</div>
</div>
<div class="item">
<div class="maining-ferma">
<img src="asseets/img/ferma1.jpg">
<p class="description">Mining Rig "ACRONYM" for Ethereum 170 Mh\s</p>
<p class="old-price">12 000 грн
<span>8 000 грн</span></p>
<a class="action" href="#" >ПОДРОБНЕЕ</a>
</div>
</div>
<div class="item">
<div class="maining-ferma">
<img src="asseets/img/ferma1.jpg">
<p class="description">Mining Rig "ACRONYM" for Ethereum 170 Mh\s</p>
<p class="old-price">12 000 грн
<span>8 000 грн</span></p>
<a class="action" href="#" >ПОДРОБНЕЕ</a>
</div>
</div>
</div>
<div class="buttons">
<div class="customPrevBtn"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="customNextBtn"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
</div>
</div>
</div>
$(".owl-carousel").owlCarousel(...);
– Crantisz 13 мая '17 в 14:14