Report

Ребята, без вас никуда!
Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?
 
На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints
 
Вот типа того что-то пробую...
https://jsfiddle.net/aqmuyhwd/
 
        
 

Ребят, подскажите, в чем может быть ошибка. На странице два слайдера от splide. Один с классом splide (работающий), другой c классом splid (не работает). Выглядит так, будто не работают стили. Отображается как не маркированный список текста и картинок. Стили добавила единожды:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css" integrity="sha256-EqzwzekQXKNbB5EE4nNBQT+2gWQIWRZQXAd89YdIq8M=" crossorigin="anonymous"> Который не работает:         Заранее спасибо!!
<div class="foo_columns">       <div class="splid">         <div class="splid__track">           <ul class="splid__list">           <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Знакомства", "downPicturePath": "img/foo1.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>       <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Знакомства", "downPicturePath": "img/foo2.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>       <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Знакомства", "downPicturePath": "img/foo3.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>       <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Приколы", "downPicturePath": "img/foo4.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>       <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Авто", "downPicturePath": "img/foo5.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>     </ul>   </div> </div>       <div class="foo__line"></div>        <script>         new Splid( '.splid', {           type   : 'loop',           perPage: 1,           speed: 2000,           autoplay: true,           interval: '3000',           arrows: true,         } ).mount();       </script>     </div>  

Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
<div class="banner"> 
      <div class="container background-image">
      <div class="banner_text"></div>
      </div>
    </div>
CSS:
.background-image {
  background-image: url('/img/new_oranges.jpg');
  background-size: cover;
  height: 200px;
}

Должно быть как на первом скриншоте. Что не так я делаю или как правильно переделать???
Помогите пожалуйста уже всю голову сломал!

Подскажите пожалуйста как растянуть фон за пределы блока, который лежит в контейнере. В верстке так же использовалась библиотека Bootstrap(решение должно быть адаптивным).