I'm currently struggling with my html and css learning project. The height of the navigation bar is not adjusting properly to the size of the image. I have tried various solutions, but nothing seems to work. Any guidance would be appreciated!
html {
overflow-x: hidden;
display: block;
}
body {
font-family: Arial;
}
header {
background: #424242;
height: 200px;
}
.navbar-logo {
width: 200px;
height: auto;
}
.navbar-items {
margin: 0px 10px 0px 0px;
display: inline;
}
.navbar-items li{
margin: 0px 10px 0px 0px;
display: inline;
padding: 20px 5px 20px 5px;
list-style-type: none;
}
.navbar-items a {
color: black;
}<header>
<!--Navbar-->
<nav class="navbar-expand">
<img src="assets/images/logo2.png" class="navbar-logo" alt="navbar logo"></a>
<ul class="navbar-items">
<li class="nav-item"><a href=".">Home</a></li>
<li class="nav-item"><a href="">About me</a></li>
<li class="nav-item"><a href="">Kontakt</a></li>
</ul>
</nav>
</header>