Mak_Pet

Как сделать так,чтобы "border-bottom" не увеличивался при наличии "padding-left", а оставался строго в границах "p"?

Именно в такой постановке - никак. Но если заменить padding на margin, всё будет работать.

Потому что элемент спозиционированный как absolute выпадает из потока документа. Теперь родитель будет вести себя так, словно у него нет детей. Можно сказать, родитель отказался от своего ребёнка.

В slick активному слайду присваивается класс slick-active

Соответственно ты можешь просто прописать стиль
Примерно так

#MYSLIDER .slick-active .MYLINE {
  тут стиль твоей линии
}

Можно через CSS сделать. Решение работает, начиная с древнего IE11 (т. к. без object-fit). Плюс, картинки не будут подвержены лишней обработке на сервере. Код включает в себя всевозможные хаки для разных браузеров.

Оно не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):

СВОЙСТВА!!! flex-basis flex-grow и flex-shrink
flex-basis - это та ширина, будем называть так, которая неотъемлима у элемента. Не хотите ее юзать - используйте min-width.
flex-grow - это "жадность" того или иного элемента. Т.е. сколько свободного пространства он съест, по сравнению с соседом (Спека: Определяет, сколько пространства может занимать флекс внутри контейнера. По дефолту = 0). Вспоминаем ФБоксовский способ прижатия футера к низу:
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}

и flex-shrink - это то, как будут сжиматься элементы, если места хватать не будет. Антагонист flex-grow. По дефолту = 1, в отличие от flex-grow = 1 (Это ТОЛСТЫЙ намек)
Спека: Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку

Базис задавать НАДО! если желаете адаптивности, при заданном flex-wrap: wrap;
Спека: Свойство flex-basis определяет основу флекса, которая является начальным размером элемента.
ВОПРОСЫ?!
https://webref.ru/css/flex-basis
https://webref.ru/css/flex-grow
https://webref.ru/css/flex-shrink

Нужны ответы? Берете простеньки макетик, а-ля Бутстрап и верстаете весь!!! на флексах. После 5-й верстки наступит Дзен! ИМХО!

Может что-то подобное попробовать?

<ol>
  <li><span>EVERY DAY, MORE THAN 1,000 JORNEYS</span></li>
  <li><span>MORE THAN 240 MISSIONS</span></li>
  <li><span>29 SORTING AND DISTRIBUTION CENTERS</span></li>
  <li><span>MORE THAN 1 THOUSAND EMPLOYEES</span></li>
</ol>

.about .about-items.delivery-solutions ol li span {
    position: relative;
    padding-left: 12px;
}

.about .about-items.delivery-solutions ol li span::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background: #f00;
    position: absolute;
    left: 0;
    bottom: 0;
}

Потому что содержимое тегов li уже, чем заданная max-width.
Добавим к одному из li, например, так: EVERY DAY, MORE THAN 1,000 JORNEYS EVERY DAY, MORE THAN 1,000 JORNEYSEVERY DAY, MORE THAN 1,000 JORNEYSEVERY DAY, MORE THAN 1,000 JORNEYS и увидим, что второй блок растянется до заданного ему значения max-width.

При задании max-width предполагается, что ширина блока будет равна либо меньше его значения, в зависимости от ширины его содержимого.
https://developer.mozilla.org/ru/docs/Web/CSS/max-width

Пример
content немного доработать

li:before {
      content:counter(myCounter) ".";
    }