* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: #000;
}
.logo {
max-width: 80%;
width: 20%;
height: 20%;
}
.navbar {
padding: 20px;
height: 50vh;
}
.navbar,
ul {
display: flex;
flex-direction: row;
}
ul li {
padding: 0 5px;
}
.wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}<nav class="navbar">
<a href="#" class="logo"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>
<div class="wrapper">
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links">Home</a>
</li>
<li>
<a href="#" class="nav-links">Products</a>
</li>
<li>
<a href="#" class="nav-links">About Us</a>
</li>
</ul>
<ul class="ul2">
<li>
<a href="#" class="nav-links">Contact Us</a>
</li>
<li>
<a href="#" class="nav-links">Blog</a>
</li>
</ul>
</div>
</nav>My attempt was to directly resize my logo using the logo class, but unfortunately, it didn't yield the desired result.
Below is the outcome I achieved:
https://i.sstatic.net/Aofaj.png
(The image appears cropped, displaying a door further down the page).
I am looking for a way to achieve this instead:
https://i.sstatic.net/aBDUr.png
Kindly disregard any alignment and spacing issues as they are from a quick screenshot reproduction.
I also attempted to add display: in-line block in my .logo{} class, but it didn't have any effect.
Any suggestions on how I can correctly resize and position my logo to align with the rest of the elements?