I'm trying to build my first navigation bar, but when I write, on my `ul`, `align-items:center`, the SVG icons simply disappear. I'm constantly trying to solve this problem, but I can't find a solution. I would really appreciate if somebody can help me out.

```css
body {
  background: white;
  color: black;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: #1e1e24;
}

body::-webkit-scrollbar-thumb {
  background: #6649b8;
}

main {
  margin-left: 8rem;
  padding: 1rem;
}

.navbar {
  width: 8rem;
  height: 200vh;
  position: fixed;
  background: rgba(0, 300, 200, 0.80);
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  width: 50px;
  position: fixed;
  height: 100%;
  line-height: 100px;
  flex-direction: column;
  align-items: center;
}

li:first-child {
  padding: 7px;
}

li:last-child {
  margin-top: 560px;
}
```

```html
<body>
  <nav class="navbar">
    <ul class="navbar-ul">
      <li class="navbar-li">
        <a href="#" class="nav-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.33 64"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M32,0H5.33A5.33,5.33,0,0,0,0,5.33V58.67A5.33,5.33,0,0,0,5.33,64H32a5.33,5.33,0,0,0,5.33-5.33V5.33A5.33,5.33,0,0,0,32,0ZM5.33,58.67V5.33H32V58.67Z"/><path class="cls-1" d="M25.36,8H12a1.34,1.34,0,0,0,0,2.67H25.36a1.34,1.34,0,0,0,0-2.67Z"/><circle class="cls-1" cx="18.64" cy="53.33" r="2.67"/></g></g></svg>
        </a>
      </li>

      <li class="navbar-li">
        <a href="#" class="nav-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.99 64"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 13</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M47.09,19.72a23.38,23.38,0,0,0-46.19,0,84.16,84.16,0,0,0,0,24.55,23.38,23.38,0,0,0,46.19,0A84.16,84.16,0,0,0,47.09,19.72ZM6.18,20.5a18.05,18.05,0,0,1,35.64,0,79.22,79.22,0,0,1,.37,19.58c-.09,0-.17,0-.26,0a64.35,64.35,0,0,1-35.87,0c-.09,0-.17,0-.26,0A78.73,78.73,0,0,1,6.18,20.5ZM24,58.67A18.08,18.08,0,0,1,6.68,45.75,69.76,69.76,0,0,0,24,48a69.75,69.75,0,0,0,17.31-2.24A18.06,18.06,0,0,1,24,58.67Z"/><path class="cls-1" d="M24,29.33a2.66,2.66,0,0,0,2.66-2.66V16a2.67,2.67,0,1,0-5.33,0V26.67A2.66,2.66,0,0,0,24,29.33Z"/></g></g></svg>
        </a>
      </li>

      <li class="navbar-li">
        <a href="#" class="nav-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 54.61"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 23</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M32,0A32,32,0,0,0,9.39,54.61l3.76-3.76a26.67,26.67,0,1,1,37.7,0l3.76,3.76A32,32,0,0,0,32,0Z"/><path class="cls-1" d="M32,10.67a21.31,21.31,0,0,0-15.07,36.4l3.76-3.76a16,16,0,1,1,22.62,0l3.76,3.76A21.31,21.31,0,0,0,32,10.67Z"/><path class="cls-1" d="M32,21.33a10.68,10.68,0,0,0-7.55,18.22l3.79-3.79A5.19,5.19,0,0,1,26.67,32a5.33,5.33,0,0,1,10.66,0,5.19,5.19,0,0,1-1.57,3.76l3.79,3.79A10.68,10.68,0,0,0,32,21.33Z"/></g></g></svg>
        </a>
      </li>

      <li class="navbar-li">
        <a href="#" class="nav-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48"><defs><style>.cls-1{fill:#35353d;}</style></defs><title>Asset 22</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M63.47,5.17A8,8,0,0,0,56,0H8A8,8,0,0,0,.48,5.33,7.44,7.44,0,0,0,0,8V40a8,8,0,0,0,5,7.41A7.85,7.85,0,0,0,8,48H56a7.32,7.32,0,0,0,2.85-.56A7.84,7.84,0,0,0,63,43.89,8,8,0,0,0,64,40V8A7.86,7.86,0,0,0,63.47,5.17ZM5.33,8A2.68,2.68,0,0,1,8,5.33H56A2.68,2.68,0,0,1,58.67,8v.51l-21.26,16L33,27.92l-1,.75-1-.78-4.46-3.33L5.33,8.61Zm0,32V15.28L22.11,27.89,5.39,40.45A2,2,0,0,1,5.33,40Zm6,2.67L26.56,31.23l3.84,2.9a2.64,2.64,0,0,0,3.2,0l3.81-2.88L52.53,42.67ZM58.67,40a2,2,0,0,1-.08.56L41.84,27.89,58.67,15.17Z"/></g></g></svg>
        </a>
      </li>
    </ul>
  </nav>
  <main>
    <h1>CSS</h1>

    <p>CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2​ Es muy usado para establecer
      el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. Te puede ayudar a crear tu propio sitio web. Junto con
      HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS).3​

    </p>
  </main>

</body>
```