I am currently working on a school project to create a webpage, but I am struggling to align an image/icon with the other buttons in the navbar. Despite my efforts to find a solution through Google searches, I have not been able to resolve this issue. Furthermore, I am restricted to using only HTML and CSS without tools like Bootstrap.
Below is the code for my page:
HTML code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Zero Hunger</title>
<link rel="stylesheet" href="css/master.css">
</head>
<body>
<nav>
<ul>
<li><img class="nav-img" src="images/2-zero-hunger.png"></li>
<li class="nav-button"><a href="index.html">Home</a></li>
<li class="nav-button"><a href="contact.html">Contact</a></li>
<li class="nav-button"><a href="game.html">Game</a></li>
</ul>
</nav>
<div class="">
<p>Hello World</p>
</div>
</body>
</html>
CSS code:
body{
margin: 0;
font-family: sans-serif;
}
/*Navbar*/
nav ul{
margin: 0;
padding: 0;
text-align: center;
background-color: #D09E37;
}
nav ul li{
list-style: none;
display:inline-block;
}
nav ul li.nav-button{
padding: 0 15px;
}
nav ul li.nav-button:hover{
background-color: #bf8000;
}
nav ul li a{
text-decoration: none;
font-size: 1.5em;
color: white;
line-height: 54px;
}
.nav-img{
height: 58px;
display: inline-block;
}