Вопрос, наверное, глупый, новичок в вёрстке. Как сделать чтобы текст оставался внутри блока с заранее заданными размерами (из Figma), а не вылазил за его пределы?
<body>
<main class="container">
<button class="button butt1" href="">
<p>Что такое системы счисления</p>
</button>
<button class="button butt2" href="">
<p>Переводы из одной системы счисления в другую</p>
</button>
<button class="button butt3" href="">
<p>Тест</p>
</button>
<button class="button butt3" href="">
<p>Автор</p>
</button>
</main>
</body>
body{
background-color: #fff5ee;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
}
.button {
margin-top: 75px;
background-color: white;
border: none;
border-radius: 25px;
font-family: 'Rubik', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 3em;
line-height:normal;
text-align: center;
}
.butt1 {
position: relative;
width: 626px;
height: 124px;
}
.butt2 {
position:relative;
width: 740px;
height: 136px;
}
.butt3 {
position: relative;
width: 231px;
height: 86px;
}
Средний
