* {
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 img {
width: 10%;
height: auto;
display: in-line block;
}
.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="#"><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>Above is the code snippet provided. There seems to be a large gap between the image and the navigation links highlighted below:
https://i.sstatic.net/YwE7L.png
Additionally, it appears that the white space is clickable. The goal is to eliminate this gap so that the layout resembles the following image (maintaining the spacing between 'About Us' and 'Contact Us' but removing the space between the image and 'Home'):
https://i.sstatic.net/fS0Oy.png
Attempts have been made to remove padding and adjust the logo placement within the list, but the issue persists.