css – Barra responsive para moviles y tablets


bueno estoy haciendo una barra responsive, pero no logro adaptarla a dispositivos moviles, la imagen y los iconos de font-awesome no logro adaptarlos al 100%; todos los elementos de la barra no se centran verticalmente en ella, ¿como hago para centrarlos de forma vertical? necesito ayuda, gracias de antemano.

Hi everyone, well I’m making a responsive bar, but I can’t adapt it to mobile devices, the image and font-awesome icons cannot adapt 100%; all the elements of the bar do not center vertically on it, how can I center them vertically? I need help, thanks in advance.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

.cabezera{
    width: 100%;
    
}

.imagen-de-cabezera{
    background: url(https://i.imgur.com/NwYzDEc.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
}
.imagen-de-cabezera img{
    width: 70%;
}

#check{
    display: none;
}
nav label{
    display: none;
    font-size: 30px;
}
nav img{
    width: 15%;
    position: relative;
    left: 8%;
    padding: 10px;
}
nav{
    background: yellow;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    width: 100%;
}
nav ul{
    display: inline-flex;
}
nav ul li{
padding: 15px;
}

@media (max-width: 1024px) {
    nav ul{
        display: none;
    }
    nav label{
        display: block;
        float: right;
         z-index: 1;
    }
  #cancel{
  display: none;
  }
    nav{
        display: table;
        overflow: hidden;
    
    }
    nav img{
        width: 18%;
    }
    #check:checked ~ ul{
  display: block;
  position: absolute;
  background: red;
  width: 100%;
  line-height: 12vh;
  height: 100vh;
  text-align: center;
}
#check:checked ~ label #btn{
    display: none;
}
#check:checked ~ label #cancel{
    display: block;

}
}
<script src="https://kit.fontawesome.com/c64e481cc8.js"></script>


<header class="cabezera" >
  <div class="imagen-de-cabezera"><a href="index.html"><img alt="omnilife" src="https://i.imgur.com/UsNjQwg.png" ></a></div>
  </header>

    <nav>
        <input type="checkbox" id="check">
<label for="check">
    <i class="fa fa-bars" id="btn"></i>
    <i class="fa fa-times" id="cancel"></i>
</label>

        <img src="https://i.imgur.com/y93jOzW.png">
        <ul class="menu">
            <li><a href="index.html"><i class="fa fa-home"></i>&nbsp;Inicio</a></li>
            <li><a href="productos omnilife/productos-omnilife.html"><i class="fa fa-shopping-cart"></i>&nbsp;Productos Omnilife</a></li>
            <li><a href="productos seytu/productos-seytu.html"><i class="fa fa-shopping-bag"></i>&nbsp;Productos Seytú</a></li>
            <li><a href=""><i class="fa fa-envelope-open"></i>&nbsp;Contáctame</a></li>
        </ul>
        
      </nav>