Putting elements next to each other on navigation menu-CodePudding

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  src="images/logo_image.svg" alt="logo">
    <nav> 
        <ul >
          <li><a href="#">Features <i ></i></a</li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>  
    </nav>
    <div id="Login_nav">
      <a href="#">Login</a> 
      <a href="#"><button id="Demobutton">Get demo</button></a> 
    </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.

CodePudding user response：

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  src="images/logo_image.svg" alt="logo">
    <nav> 
        <ul >
          <li><a href="#">Features <i ></i></a</li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>  
    </nav>
    <div id="Login_nav">
      <a href="#">Login</a> 
      <a href="#"><button id="Demobutton">Get demo</button></a> 
    </div>
</header>