Не пойму из-за чего текст вылазит за блок ?
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);
.first-item {
display: flex;
align-items: center;
height: 7.556vh;
width: 38.542vw;
opacity: 0.7;
filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
background: linear-gradient(90.49deg, #007EFF 0.42%, rgba(0, 0, 0, 0.6) 95.58%);
box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(1.389vh);
border-radius: 1.389vh;
}
.first-item__img {
height: 5.556vh;
width: 5.556vh;
padding: 1.189vh 1.389vh 0 1.389vh;
}
.first-item__progress {
border-bottom: 0.412vh solid #FFFFFF;
}
.first-item__text {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 2.03704vh;
line-height: 1.3;
display: flex;
align-items: center;
letter-spacing: -0.05em;
color: #FFFFFF;
text-shadow: 0px 0.4px 4px rgba(0, 0, 0, 0.5);
}
.first-item {
display: block;
-webkit-animation: fadeOut 3s linear forwards;
-moz-animation: fadeOut 3s linear forwards;
-o-animation: fadeOut 3s linear forwards;
-ms-animation: fadeOut 3s linear forwards;
animation: fadeOut 3s linear forwards;
}
.first-item .first-item__progress {
-webkit-animation: runProgress 2s linear forwards 0.7s;
-moz-animation: runProgress 2s linear forwards 0.7s;
-o-animation: runProgress 2s linear forwards 0.7s;
-ms-animation: runProgress 2s linear forwards 0.7s;
animation: runProgress 2s linear forwards 0.7s;
}
@-webkit-keyframes fadeOut {
0% { opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-25px);}
100% { opacity: 0; }
}
@-webkit-keyframes runProgress {
0%{ width: 0%; }
100%{ width: 94%; }
}
@-moz-keyframes runProgress {
0%{ width: 0%; }
100%{ width: 94%; }
}
@-o-keyframes runProgress {
0%{ width: 0%; }
100%{ width: 94%; }
}
@-ms-keyframes runProgress {
0%{ width: 0%; }
100%{ width: 94%; }
}
@keyframes runProgress {
0%{ width: 0%; }
100%{ width: 94%; }
}
<div id="app" class="wraper">
<div class="notifacation" id="notifacation">
<section class="first-item">
<img class="first-item__img" src="img/infocircle.png" alt="infocircle">
<p class="first-item__text">Текстовый текст, что б его! Текстовый текст, что б его! <br>
Текстовый текст, что б его! Текстовый текст, что б его!</p>
<div class="first-item__progress"></div>
</section>
</div>
</div>