Не могу правильно расположить текст

Question

Суть моей проблемы в следующем. Я не могу правильно настроить позицию текста в контейнере. Дал всему контейнеру позицию релатив, а нужный блок с текстом абсолютно, но что-то не выходит. Что должно быть:

Html:

<div class="osnova">
    <p class="Title">Bring clarity to your team</p>
    <p class="Bottom">Slite is a modern knowledge base that drives action with structured docs, thoughtful collaboration and
        confident decision-making.</p>
</div>

Css:

 .osnova {
   margin: 0 auto;
   width: 900px;
   position: relative;
}   


.Title {
    text-align: center;
    margin: 50px;
    font-size: 60px;
    font-weight: 500;
    
}

.Bottom {
    position: absolute;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    

}

Answer 1

Я не профи в css и написал такой кастыль с уменьшением ширины текста:

css

.osnova {
   margin: 0 auto;
   width: 800px;
}   


.Title {
    text-align: center;
    margin: 50px;
    font-size: 60px;
    font-weight: 500;
    
}

.Bottom {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    width: 700px;
    margin-left: 50px;
}

Метод рабочий, но могут возникнуть проблемы при подстраивание под другие устройства. Ещё одним минусом является вечная тонкая настройка ширины текста вместо нормального метода.

БЛОГ НА HUSL

Не могу правильно расположить текст

Ответы (1 шт):