Как мне спозиционировать скролл на странице?

Question

[Maks Kulikov]

У меня есть контент, который выходит за рамки сайта и нужно сделать так, чтобы он прокручивался горизонтально.
Но проблема в том, что я не могу позиционировать скролл и управлять его размерами. Он устанавливается относительно блока контента, который выходит за рамки страницы.
Мне нужно расположить его по центру снизу, на изображении видно примерное расположение. И возможно изменять его ширину. Благодарю того, кто подскажет, как это сделать. Уже всё перерыл, не знаю, как еще подойти к решению этого вопроса
Это пример HTML:

<div class="content">
 <ul class="slide-bar">
  <li> Block1 </li>
  <li> Block2 </li>
  <li> Block3 </li>
  <li> Block4 </li>
  <li> Block5 </li>
  <li> Block6 </li>
 </ul>
</div>

Это пример CSS:

.content
 width: 150%;
 overflow-x: scroll;

.slide-bar
 width: 100%;

.slide-bar li
 display: block;
 width: 65vh;
 height: 245px;
 margin: 25px;
 float: left;

Comments

[Maks Kulikov]

Кстати говоря, на некоторых страницах его нужно расположить слева, относительно контента.

[Михаил]

Maks Kulikov, padding-bottom у .content

[Maks Kulikov]

Михаил, прикольно

Answer 1

[Павел Чесноков]

А может лучше уменьшить ширину блоков чтобы влезли все и без скролла?
Ну а если это "дизайнерская задумка" то попробуйте сделать карусель.

• darsa.in/sly/examples/horizontal.html
  
• https://github.com/maksbd19/owlcarousel-scrollbar-...