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.
*{
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> Inicio</a></li>
<li><a href="productos omnilife/productos-omnilife.html"><i class="fa fa-shopping-cart"></i> Productos Omnilife</a></li>
<li><a href="productos seytu/productos-seytu.html"><i class="fa fa-shopping-bag"></i> Productos Seytú</a></li>
<li><a href=""><i class="fa fa-envelope-open"></i> Contáctame</a></li>
</ul>
</nav>