Текст многострочного баннера не выравнивается по левому краю одинаково ⇐ CSS

[Anonymous]

У меня возникли проблемы с равномерным выравниванием текстового содержимого на ленточном баннере по левой стороне.
Codepen
Проблемы, с которыми я столкнулся надеюсь исправить:

• Первая строка текста имеет немного больший отступ слева, чем вторая строка.
• Я также вижу, что отступы в правой части второй строки более расширены, чем в первой.

Я пробовал настроить CSS, но я не могу понять это правильно. Любые предложения о том, как исправить эту проблему с выравниванием и заполнением? Цель – сохранить выравнивание текста по левому краю в обеих строках, вертикальное выравнивание на ленте и одинаковые отступы со всех сторон.
Вот код:
CSS

Код: Выделить всё

/* Full-width image with ribbon text */

.ribbon-header-hero {
position: relative;
margin-bottom: 3rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.ribbon-header-hero img {
object-fit: cover;
width: 100% !important;
height: auto !important;
margin: 0;
padding: 0;
}

.ribbon-hero-text-blue, .ribbon-hero-text-white {
text-align: left;
position: absolute;
bottom: 0;
left: 0;
margin: 2%;
max-width: 90%;
}

.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
display: inline;
font-size: 1.4rem;
letter-spacing: 1px;
font-weight: 700;
line-height: 195% !important;
text-align: left;
padding: 7px 14px;
vertical-align: baseline;
text-transform: uppercase;
}

.ribbon-hero-text-blue p {
background-color: #2774ae;
color: #ffffff;
}

.ribbon-hero-text-white p {
background-color: #fff;
color: #2774ae;
}

@media (min-width: 1100px) {
.ribbon-hero-text-blue, .ribbon-hero-text-white {
max-width: 70%;
margin: 5%;
}

.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
font-size: 1.7rem;
line-height: 1.85em !important;
}
}

@media (min-width: 1300px) {

.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
font-size: 2.2rem;
line-height: 1.75em !important;
}
}

Код: Выделить всё

[img]https://storage.googleapis.com/assets_library/canvas-template/Banners/Banner2_students.jpg[/img]

Begin Your
Learning Journey

Заранее спасибо за помощь!

Подробнее здесь: https://stackoverflow.com/questions/786 ... ft-equally