title: When I type align-items:center my svg icons dissapear
body: <p>I'm trying to build my first navigation bar, but when I write, on my <code>ul</code>, <code>align-items:center</code>, 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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;nav class="navbar"&gt;
      &lt;ul class="navbar-ul"&gt;
        &lt;li class="navbar-li"&gt;
          &lt;a href="#" class="nav-link"&gt;
            &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.33 64"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:#35353d;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;Asset 1&lt;/title&gt;&lt;g id="Layer_2" data-name="Layer 2"&gt;&lt;g id="Layer_1-2" data-name="Layer 1"&gt;&lt;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"/&gt;&lt;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"/&gt;&lt;circle class="cls-1" cx="18.64" cy="53.33" r="2.67"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
          &lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li class="navbar-li"&gt;
          &lt;a href="#" class="nav-link"&gt;
            &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.99 64"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:#35353d;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;Asset 13&lt;/title&gt;&lt;g id="Layer_2" data-name="Layer 2"&gt;&lt;g id="Layer_1-2" data-name="Layer 1"&gt;&lt;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"/&gt;&lt;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"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
          &lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li class="navbar-li"&gt;
          &lt;a href="#" class="nav-link"&gt;
            &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 54.61"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:#35353d;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;Asset 23&lt;/title&gt;&lt;g id="Layer_2" data-name="Layer 2"&gt;&lt;g id="Layer_1-2" data-name="Layer 1"&gt;&lt;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"/&gt;&lt;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"/&gt;&lt;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"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
          &lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li class="navbar-li"&gt;
          &lt;a href="#" class="nav-link"&gt;
            &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:#35353d;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;Asset 22&lt;/title&gt;&lt;g id="Layer_2" data-name="Layer 2"&gt;&lt;g id="Layer_1-2" data-name="Layer 1"&gt;&lt;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"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;main&gt;
      &lt;h1&gt;CSS&lt;/h1&gt;
  
      &lt;p&gt;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​
  
      &lt;/p&gt;
    &lt;/main&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>