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 >
        <div >
        <img  src="icons/logo.svg" alt="Logo">
        <p >Travel Portal</p>
  </div>
    
        <nav>
            <ul >
                <li><a href="#">How It Works</a></li>
                <li><a href="#">Plan Your Trip</a></li>
                <li><a href="#">Destinations</a></li>
                <li><a href="#">Travel Stories</a></li>
            </ul>
        </nav>
   
    
        <form >
            <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; 
}

CodePudding user response：

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.

CodePudding user response：

Try it:

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