Перекрывающийся текст в мобильном представлении

Question

У меня проблема с мобильным просмотром на bootstrap, когда тексты перекрывают следующий раздел

Самый маленький медиазапрос, который у меня есть, - 768 пикселей и экран, на котором я нахожусь проверка от iPhone XS Max

@media screen and (min-width: 768px){
    .services .carousel-inner p{
    margin-top: 110px;
}
@media screen and (min-width: 960px){
    .services .carousel-item p{
    text-align: center;
    margin-top: 120px;
}
@media screen and (min-width: 992px){
    .services .carousel-item p{
    width: 60%;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){
    .services .carousel-item p{
    margin-top: 105px;
    font-size: 1.1em;
}
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi), (max-resolution: 125dpi){
    .services .carousel-item p{
    width: 100%;
    font-size: 1.1rem;
}

Что можно улучшить, чтобы исправить мою проблему?

Answer 1

.services{
    height: 100%;
    padding: 5;
}
.services .carousel-inner{
    height: 100%;
}