No puedo alinear horizontalmente mi header
este es el código HTML:
<header class="header">
<div class="logo">
<img src="./images/logo.png" alt="logo">
<nav class="">
<ul class="navLinks">
<li><a href="./pages/information.html">Conocenos</a></li>
<li><a href="./pages/clients.html">Clientes</a></li>
</ul>
</nav>
<a href="./pages/contact.html" class="btn"><button>Contacto</button></a>
</div>
</header>
y pasamos al SCSS
.header{
background-color: $firstColor;
width: 100%;
height: 85px;
padding: 5px, 10%;
.logo{
margin-right: auto ;
cursor: pointer;
img {
height: 70px;
width: auto;
transition: all 0.3s;
padding: 15px 20px;
}
img:hover{
transform: scale(1.2);
}
}
.navLinks {
list-style: none;
}
li{
display: inline-block;
padding: 0px 20px;
}
li:hover{
transform: scale(1.2);
}
a{
font-size: 20px;
text-decoration: none;
color: beige;
}
a:hover{
color: $hoverColor;
}
.btn{
button{
font-weight: 700;
color: $firstColor;
padding: 9px 25px;
background-color: $secondaryColor;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
margin-left: 15px;
}
por lo que me queda el logo alineado en el header pero luego los link por fuera y uno debajo del otro. lo que quiero es que quede el logo a la izquierda, luego los links alienados a la derecha pero todo a la vez alineado horizontalmente dentro del header Muchas gracias por cualquier ayuda que me brinden!!