html - Navigationbar height adapts to Img

Question

I'm currently learning html and css, but I have a problem that the height of the navigation bar adapts to the picture. How can I change that? I've tried a lot, unfortunately without success: /

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>

question from:https://stackoverflow.com/questions/65865634/navigationbar-height-adapts-to-img

Answer 1

the picture is a inline content of tag NAV, so the NAV will always adjust to contain the picture, you have to adjust the picture's height.