* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
max-width: 1440px;
margin: 0;
padding: 0 15px;
}
nav {
background-color: #D3D3D3;
}
.navdiv ul,
a {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
gap: 15px;
}
.navdiv li a {
font-weight: 800;
transition: 0.5s;
text-decoration: none;
color: black;
&:hover {
background-color: blue;
translate: 40px 20px;
}
}
.navdiv img {
width: 300px;
}
<nav>
<div class="container">
<div class="navdiv">
<img src="img/logo.png" alt="logo">
<ul class="list">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</nav>