Putting elements next to each other on navigation menu - html

Question

For my website I am designing a navigation bar and the goal is to position each element at the same height. This is the code I have so far:
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
justify-content: space-around;
}
<header>
<img class="logo" src="images/logo_image.svg" alt="logo">
<nav>
<ul class="Nav_links">
<li><a href="#">Features <i class="fa-solid fa-angle-down"></i></a</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
I assume I did something wrong with the styling of the elements in CSS, because whenever I remove the CSS formatting of my id "#Login_nav" the login and get demo button do stand next to each other in the correct fashion, but still located too closely to each other.

Answer 1

Add a { gap: 1rem } and { align-items: center } on Login_nav, and I think you will get what you want, like so:
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
<header>
<img class="logo" src="images/logo_image.svg" alt="logo">
<nav>
<ul class="Nav_links">
<li><a href="#">Features <i class="fa-solid fa-angle-down"></i></a</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>