Struggling with creating a header and having trouble with proper link href placement. The logo-box I'm working on contains the company's logo image and name, but when using display flex to align them, it covers the full width of the box. I'm looking to have the href only activate when hovering over the logo or name, not the entire box. Any suggestions on how to resolve this issue?
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="logo-block">
<a href="" class="logo-block-link">
<img src="logo.png" alt="" class="logo">
<h3 class="logo-tittle">Company</h3>
</a>
</div>
<ul class="nav-list">
<li><a href="">About</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Team</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
nav{
background-color: salmon;
}
.container{
padding: 15px 0;
background-color: #fdcb9e;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
}
.logo-block{
flex:1;
border:1px solid gold;
}
.logo-block-link{
display: flex;
border:1px solid black;
}
.logo{
width: 50px;
height: 50px;
}
.nav-list{
flex:1;
display: flex;
justify-content: space-between;
}
.logo-tittle{
font-size:20px;
color:#3f3f44;
text-transform: uppercase;
letter-spacing: 2px;
font-family: monospace;
margin-left: 10px;
}
.nav-list li a{
font-size:16px;
color:#3f3f44;
font-family: monospace;
}