Текст боковой панели выходит за пределы допустимого ⇐ CSS

[Anonymous]

Я пытаюсь создать боковую панель, где тексты/ссылки должны быть в центре боковой панели, но текст продолжает выходить за ее пределы, потому что слова становятся длиннее, и я не знаю, как это исправить, я пробовал использовать отступы и маржа, но это не сработает. я надеюсь, что кто-нибудь поможет узнать, что я делаю неправильно, потому что я не могу найти ответ или даже в чем проблема

Код: Выделить всё

*{
margin: 0;
padding: 0;
}

.sidebar{
background-color: rgb(189, 186, 186);
width: 10vw;
font-family: "Fira Sans", sans-serif;
height: 100vh;

}

.sidebar nav{
padding: 40px;

}

.sidebar nav li{

list-style: none;
font-size: 20px;
padding: 33px 0;
white-space: nowrap;
display: inline-block;
overflow: hidden;

}

.main{

width: 90vw;
}

.container{
display: flex;
}

.infoContainer{

height: 58vh;
width: 80vw;
margin: 140px auto;
display: flex;
justify-content: space-around;
}

.devInfo{
display: flex;
justify-content: center;
flex-direction: column;
font-family: "Source Code Pro", monospace;
margin: 10px;
}

.hello{
font-size: 50px;
}
.name{
font-size: 25px;
font-weight: bold;
font-family: "Fira Sans", sans-serif;
}
.about{
font-size: 20px;
}

.moreAbout{
font-size: 15px;
font-family: "Fira Sans", sans-serif;
}

.buttons {
margin-top: 34px;
}
.buttons button{
padding: 9px 14px;
border-radius: 22px;
color: white;
background-color: dodgerblue;
font-weight: bold;
font-size: 21px;
margin: 0 3px;
cursor: pointer;
}

.devPic img{
height: 58vh;
}

Код: Выделить всё

[list]
[*][url=/]Home[/url]
[*][url=/intro.html]My Intro[/url]
[*][url=/services.html]Services[/url]
[*][url=/contact.html]Contact Me[/url]
[*][url=/blog.html]Blog[/url]
[/list]




Hi I am
Awais Rafique
Developer, Programmer, Software Engineer

Я пытался использовать отступы и поля, чтобы больше сместить содержимое в середину, но он не отвечает так, как я надеялся

Подробнее здесь: https://stackoverflow.com/questions/783 ... -its-limit