Flipster P выходит за пределы родительского div

Я делаю слайдер-флипстер, где люди могут давать отзывы о компании. Но текст течет за пределами div. Я пробовал множество вещей, но я не могу заставить его работать так, как я хочу. Вот что у меня есть:

https://imgur.com/dfLlUSg

и вот чего я хочу:

https://imgur.com/f61MFCf

Я использую поле Advanced Custom Fields Repeater.

Кроме того, две строки текста (над картинкой) не имеют пробелов, я не знаю почему.

Вот как это построено:

https://imgur.com/MX49WWB

Кто-нибудь может мне с этим помочь?

Это некоторые дополнительные SCSS:

.flipster {
//margin-top: 75px;
ul {
height: 483px !important;
margin-top: 5px;
.flipster__item--current article {
box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.2);
}
li {
&.flipster__item--future {
.flipster__item__content {
//transform: rotate(0) !important;
}
}

&.flipster__item--past {
.flipster__item__content {
//transform: rotate(0) !important;
}
}


article,
.flipster article {
padding: 45px;
width: 460px;
margin: 10px auto;
height: 460px;
background: #fff;
box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, .1);

.quote {
text-align: center;
p {
font-size: 32px;
text-align: center;
}
}
.quote-persoon {
p {
font-size: 18px;
color: $oranje;
text-align: center;
padding: 35px 0 5px 0;
display: block;
}
span {
font-size: 16px;
width: 100%;
display: block;
text-align: center;
}
img {
margin: 35px auto 0 auto;
display: block;
border-radius: 75px;
}
}
}
}
}
.flipster__button {
opacity: 1;
svg {
color: $oranje;
}
}
}

Когда я перезагружаю страницу, я вижу, что все внутри div это так, как должно быть, но потом просто быстро выпрыгивает