Why my log is not align with my text on the header?

Question

I was trying to make my header, pretty simple just a logo and some text. But I can't align my text with my image. Does anyone know why this happens and how I could solve this problem?

This is my code.

header {
    background-color:lightblue;
}

.nav-box {
    position: relative;
    width: 940px;
    height: 250px;
    margin: 0 auto auto 0;
}

.logo-header {
    height: 150px;
    width: 150px;
    position: absolute;
    top: 25px;
    left: 0;
    margin-left: 2em;
    padding: 1em;
}

.header-text { 
    position: absolute;
    top: 50%;
    right: 0;
}

.welcome-msg {
    font-weight: bold;
    color: gray;
    -webkit-text-stroke-width: 0.1px; 
    -webkit-text-stroke-color: #000;
    padding: 0.5px; 
}

    <header>  
    <div class="nav-box">
        <img class="logo-header" src="C:\Users\gusta\OneDrive\Desktop\Programação\to-do\ToDo\tasks\templates\images\logo\logo_transparent.png">
        <div class="header-text">
            <h2 class="welcome-msg">Welcome to Tasks to be Done!</h2> 
            <p  class="welcome-msg">Put your tasks right bellow, </p>
            <p  class="welcome-msg">press start in the tracker button and let´s do it! </p>
        </div>
    </div>
</header>

This is what shows up on my page

Answer 1

I just did this in my editor. Should get you what you want.

 `.nav-box {
    position: relative;
    width: 100%;
    height: 250px;
    margin: 0 auto auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-header {
    height: 150px;
    width: 150px;
    position: absolute;
    top: auto;
    bottom: auto;
    left: 0;
    margin-left: 2em;
    padding: 1em;
}

.header-text {
    /* removed styling */
}`