@Import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing:

border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: #ecf0f3;
}
.side_bar{
position: relative;
top: 0;
left: -100%;
width: 300px;
height: 100vh;
background: #ecf0f3;
padding: 12px;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1,
inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
transition: all 0.3s ease;
}
.side_bar .title{
display: flex;
justify-content: space-evenly;
}
.side_bar .title .logo{
font-size: 27px;
font-weight: 600;
color: #31344b;
}
.side_bar ul{
margin-top: 35px;
list-style: none;
}
.side_bar ul a{
color: #31344b;
text-decoration: none;
display: block;
margin-top: 12px;
font-size: 18px;
font-weight: 400;
padding : 10px 25px;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
position: relative;
transition: all 0.2s ease;
}
.side_bar ul i{
margin-right: 10px;
}
.media_icons{
margin-top: 40px;
display: flex;
justify-content: center;
}
.media_icons a{
position: relative;
margin: 0 3px;
font-size: 17px;
cursor: pointer;
height: 0px;
width: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
text-decoration: none;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
transition: all 0.3s ease;
}
.side_bar ul a:hover:before,
.media_icons a:hover:before{
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
}
.side_bar ul a:hover:before{
border-radius: 6px;
}
.media_icons a:hover:before{
border-radius: 50%;
}
.side_bar ul a:hover{
color: #3498db;
}

.media_icons a:nth-child(1){
color: #4267b2;
}
.media_icons a:nth-child(2){
color: #1da1f2;
}
.media_icons a:nth-child(3){
color: #e1306c;
}
.media_icons a:nth-child(4){
color: #ff0000;
}
label{
font-size: 17px;
color: #31344b;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
height: 0px;
width: 0px;
border-radius: 50%;
text-align: center;
line-height: 37px;
cursor: pointer;
transition: all 0.3s ease;
}
label:hover{
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
color: #3498db;
}
#check{
display: none;
}
.bars{
position: absolute;
left: 15px;
top: 15px;
}
#check:checked ~ .side_bar{
left: 0;
}


.footer-bottom{
text-align: center;
color: #999:
padding-top: 30px;
width: 10px;
height: 10px;
left: 100%;
text-align: center;
line-height: 40px;

.footer left p{
padding-right: 10%;
collor: #999;
}

!codepen

Shirinov S

Скрин с кодпена, гениально Тебя просили ссылку на код.

У меня нет ссылки на код, можете показать в виде файла

Не можем. Зарегистрируйся и сохрани пен, или хотя бы с редактора кода скрины сделай, а не текстом в сообщениях.

Я так вижу, у тебя везде фиксированная ширина и высота. Поставь лучше вместо width — max-width и вместо height — max-height и проверь, хватает ли у тебя высоты блока для твоего текста.

https://codepen.io/Sadillo/pen/jOYEqyr