5 replies

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)