Struggling with learning CSS and HTML, particularly when it comes to positioning elements on the page. I'm having trouble vertically aligning the elements inside the top nav bar and can't seem to figure out what I'm doing wrong. Any insights into my mistakes that are preventing me from moving the elements where I want them would be greatly appreciated. Here's the code and a link to the js fiddle: https://jsfiddle.net/9trux138/2/
body {
margin: 0;
}
.topbar {
background-color: #17D8C7;
height: 35px;
overflow: hidden;
align-items: center;
padding: 0 2% 0 2%;
}
.topbar {
display: flex;
justify-content: space-between;
}
.topbar ul {
margin: 0;
padding-left: 0;
list-style: none;
position: relative;
display: inline-block;
}
.topbar ul li {
display: inline-block;
vertical-align: middle;
}
.topbar ul li a {
display: inline-block;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
.topbar ul li img {
height: 24px;
padding: 5px 5px 0px 0px;
}
.topright li {
vertical-align: middle;
}<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="topbar">
<ul class="topleft">
<li>
<a href="#"><img src="https://s8.postimg.cc/6t7njymhx/location-pin.png
" alt="Location Pin"></a>
</li>
<li>
<a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Contact Email"></a>
</li>
<li>
<a href="#"><img src="https://s8.postimg.cc/fbh3oalat/open-time.png
" alt="Opening Times"></a>
</li>
</ul>
<ul class="topmiddle">
<li>
<a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"><span>Email Promotions</span></a>
</li>
</ul>
<ul class="topright">
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>James