Icons are not centered in half screen

I have tried everything I know, but I'm a little rusty codepen: https://codepen.io/Zrizzy/pen/NWeQgGv <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>you suck if u read this</title> </head> <body> <ul class="sidebar"> <li class="icon"> <span class="material-symbols-outlined"> add </span> </li> <li class="icon"> <span class="material-symbols-outlined"> add </span> </li> </ul> </body> </html> CSS: ul{ height: 100vh; position: fixed; background-color: #d13d3d; border-color: #00ADB5; border: solid; border-width: 4px; border-radius: 5px; width: 5vw; display: flex; justify-content: center; } li{ list-style-type: none; text-align: center; } (the colors are temperery)
Zrizzy
CodePen
NWeQgGv
...
No description
4 Replies
Riley
Riley13mo ago
Do you just want to add padding-inline: 3rem (or however much you want) to your ul? padding-inline: 0 will center them without making the element any bigger
vince
vince13mo ago
If you want it to wrap, use flex-wrap: wrap on the flex container
ZrizzyOP
ZrizzyOP13mo ago
I did both and it worked after I removed justify content, thank you so much, and sorry for the late response I was needed to do something urgently
ZrizzyOP
ZrizzyOP13mo ago
No description
Want results from more Discord servers?
Add your server