I'm facing an issue with my navbar's divs not displaying side by side when set to display inline. Here is the HTML code snippet:
<!--Nav starts here-->
<nav class="navbar">
<div class="navbar-item-set">
<div class="navbar-item">
<a href="index.html" class="navbar-text">
<img src="images/sad_robot.png" alt="" width="45" height="45"/>
<br>
ID2 Games
</a>
</div>
<div class="navbar-item">
<a href="index.html" class="navbar-text">
<img src="images/sad_robot.png" alt="" width="45" height="45"/>
<br>
Fizz + Hummer
</a>
</div>
</div>
</nav>
<!--Nav ends here-->
Here is the CSS that I have used:
.navbar{
height: 80px;
text-align: center;
font-size: 1.7rem;
background-color: black;
}
.navbar-item-set{
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.navbar-item{
display: inline;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}
I am puzzled as to why this strange layout behavior is occurring. Can anyone help me figure out the cause?