Why is there a gap to other elements when I add an image to the navigation bar in html?

right now the HTML file gives me very weird issue when the image is added. When I remove the image, it returns to normal. I want to make the element alignment matches with the image.





Here is the HTML file:






DataPredict













Home





Contact





Why DataPredict












And here is the CSS file:
body {

margin: 0px 0px 0px 0px;

}

.top-navigation-bar {

background-color: #5B9BD5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
width: inherit;
height: 50px;

}

.top-navigation-bar img{

margin: 0px;
padding: 0;
border-width: 0;
width: auto;
height: 100%;
display: inline;

}

.top-navigation-bar button{

border-width: 0px;
margin: 0px;
padding: 0;
background-color: inherit;
padding-block: 0;
width: 10%;
height: 100%;
border-style: none;
display: inline;

}

.top-navigation-bar button text{

padding: 0;
height: 100%;
width: 95%;
background-color: inherit;
display: inline;

}

.top-navigation-bar button selected{

padding: 0;
height: 90%;
width: 5%;
background-color: inherit;
display: inline;

}

.top-navigation-bar button:hover selected{

padding: 0px 0px 0px 0px;
height: 90%;
width: 5%;
background-color: black;
display: inline;

}



Ah also, I was trying to make a black bar appear when the mouse hovers over it. So don't change that. But also I could not get that to work either, since it isn't appearing when I hover it. What exactly I'm missing here?