How to place the logo, name, button and nav in header - html

Question

I want to make this header but I stucked
I tried to place it in different ways, but nothing worked. How can I place the text near the logo and make an indent from the edge of the button?
https://codepen.io/Pero-Kairu/pen/mdXvaBV
<header class="header">
<div class="wrap_logo">
<img class="logo" src="icons/logo.svg" alt="Logo">
<p class="name">Travel Portal</p>
</div>
<nav>
<ul class="nav_links">
<li>How It Works</li>
<li>Plan Your Trip</li>
<li>Destinations</li>
<li>Travel Stories</li>
</ul>
</nav>
<form class="login_button">
<input type="button" value="Login">
</form>
</header>
li, a, button {
text-decoration: none;
color: white;
}
li{
list-style-type: none;
}
header {
display: flex;
position: fixed;
justify-content: space-between;
align-items: center;
width: 100%;
height: 90px;
background-color: rgba(242, 120, 92, 0.7);
color: white;
}
.nav_links li {
display: inline-block;
margin: 0 42px;
}

Answer 1

Please use this full HTML markup & CSS code. It's the perfect code for desktop devices. I hope it will help you better.
<header class="header">
<div class="wrap_logo">
<a href="index.html">
<img class="logo" src="https://icon-library.com/images/avatar-png-icon/avatar-png-icon-13.jpg" alt="Logo">
<span class="name">Travel Portal</span>
</a>
</div>
<nav>
<ul class="nav_links">
<li>How It Works</li>
<li>Plan Your Trip</li>
<li>Destinations</li>
<li>Travel Stories</li>
</ul>
</nav>
<form action="#" class="login_button">
<input type="button" value="Login">
</form>
</header>
.header {
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
position: fixed;
padding: 15px 20px;
align-items: center;
justify-content: space-between;
background-color: rgba(242, 120, 92, 0.7);
}
.header .wrap_logo > a {
color: #ffffff;
font-size: 20px;
font-weight: bold;
align-items: center;
display: inline-flex;
}
.header .wrap_logo img {
max-width: 40px;
margin-right: 10px;
}
.header .nav_links {
margin: 0;
padding: 0;
}
.header .nav_links > li {
display: inline-block;
}
.header .nav_links > li:not(:last-child) {
margin: 0 42px 0 0;
}
.header .nav_links > li > a {
color: #ffffff;
font-size: 16px;
font-weight: 500;
}
Let me know if you need any other help.
Thank You.

Answer 2

All you are missing is some styling in your .wrap_logo class:
.wrap_logo {
display: flex;
align-items: center;
}
Also if you want to have some space between the elements and the borders of the page you can just add some padding.

Answer 3

Try it:
.logo{
position: absolute;
margin-top: 15px;
}
.name{
posirion: absolute;
margin-left: 70px;
}