froggush

ctrl + shift + p > vtmi

3 блока в флекс или грид заверните, на + и - повешайте событие клик, но инпут событие input. Если число не должно редактироваться с клавиатуры, то просто блок с числом. И сделайте это отдельным компонентом. Может пригодится в другом месте. Не надо тут никаких либ, тут на пол часа работы максимум

Для родителя

display: flex; flex-wrap: wrap; justify-content: space-between;

Для айтемов
width: calc(50% - 10px);

В итоге у вас один айтем выйдет 575px, соответственно отступ между ними будет 20px

Либо в процентах указывайте ширину (напр. 49.5%)

использовать svg узор

Дать изображению
display: block
или

font-size: 0;
line-height: 0;

<img /> изначально - display :inline-block
Поэтому на него влияет line-height и другие штучки.

Вижу несколько вариантов.
1. все что сзади текста это бекграунд. Половина бекграунда - сплошной цвет, вторая половина изображение.
в этом случае контент просто в сетке.
2. Это два контейнера. тогда тексту в контейнере нужно дать отступ.
на примере левого контейнера.
Допустим у нас сетка 4го бутстрапа, у которого идет 1170px и поддинги по 15px. Тогда делаем для текста стили как-то так:

.text-wrapper {
  margin-left: calc(50% - 1140px/2);
  padding-left: 15px;
  padding-right: 15px;
}

Удали min-width: 320px;, так как по сути ты задал минимальный размер для контейнера, меньше которого он не сожмется. Отсюда у тебя прокрутка, если окно меньше этого размера. Просто удали это свойство, оно тут не нужно.

overflow-x:hidden; или можно вставить картинку бэкграундом и задать ей смещение.

overflow:hidden

UPD: Секции, которая непосредственно содержит всю эту красоту, ибо в противном случае, если цепляться за body, то ты как минимум сломаешь position:sticky свойства.

Чтобы убрать горизонтальный скрол используйте css-свойство overflow-x;
CSS-код:

body {
  overflow-x: hidden;
}

Можно background-clip, или таки skew

Используйте :after/:before и "вырежте из них 3угольники".

З.ы. геометрические фигуры на css в гугле даст вам подсказку

https://stackoverflow.com/questions/13591584/slant...
https://stackoverflow.com/questions/17947565/how-t...

<a href=""><span>click</span></a>

a {
  display: inline-block;
  padding: 10px;
  background: red;
  transform: skew(10deg);
  border-radius: 4px
}

a span {
  display: inline-block;
  transform: skew(-10deg);
  color: #fff;
}

На сегодняшний день верстальщик это стек минимум из 3х языков, включая JS. Нет понимания JS, нет нормальной рабочей верстки. Даже если тебе попадаются проекты без JS (покажите мне такие), то отсутствие знания не освобождает от ответственности.

Поэтому, чтобы называться начинающим верстальщиком, тебе нужен как минимум базовый JS. Без него ты никому не нужен, даже гавностудиям. Его ты можешь получить на курсах и в свободном доступе. Да хотя бы тут. Материал годный, рекомендую.

Ну и напоследок, фронтендер = верстальщик, просто у нас в русском языке есть такой самостоятельный термин.

Так что я рекомендую закрыть этот минус и идти договариваться подмастерьем (джуном).

Нужно добавить padding ко всему слайдеру, потому что у всех слайдеров контейнер со слайдами имеет свойство overflow, вот оно и режет вашу тень. Либо добавить тень на сам контейнер со слайдами. Чтобы сказать что-то конкретное нужно смотреть код.

Пробел между селекторами это комбинатор. Их есть еще несколько.