Hey guys, i was doing one of the assignments and was trying to center my icons and text. It seems that when i try to center them they dont seem to line up but when i text-alight left they alight perfectly… what can i do to align them in the center?
.container{
background-color: #2a2138;
width:20%;
height:100vh;
text-align: center;
}
.container ul{
list-style: none;
color:white;
margin: 0;
padding-top: 3rem;
padding-left: 0;
}
.container li{
padding: 1rem;
font-size: medium;
word-spacing: 1rem;
text-align: center;
}
.container li:hover{
color:lightgrey;
}
.container i {
margin-right: 1rem;
width: 2rem;
text-align: center;
}
