Fixed position not working properly

HTML-CSS
1 
<html>

<!-- header section  -->
    <header id="header">
        <div class="logo">
            <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="trombone Logo">
        </div>

        <nav id="nav-bar">
            <ul>
                <li><a href="#features-section">Features</a></li>
                <li><a href="#video-section">How it works</a></li>
                <li><a href="#pricing-section">Pricing</a></li>
            </ul>
        </nav>
    </header>

<!-- header section ends here -->


<!-- email section starts here -->

<section id="email-section">
    <h2 id="email-heading">
        Handcrafted,home-made masterpieces
    </h2>
    <form id="form">
        <input type="email" id="email-input" placeholder="Enter your email address">
        <input type="submit" id="submit-input" value="GET STARTED">
    </form> 
</section>

<!-- email section ends here -->

</html>
<style>

@import "https://fonts.googleapis.com/css?family=Lato:400,700";

body{
    background-color: rgb(238, 238, 238);
    font-family: lato;
}
/* header styling starts here */

ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}

#header{
    display: flex;
    justify-content: space-between;
   /* position: fixed;*/

}

.logo{
    display: flex;
    justify-content:  center;
    align-items: center;
    
}
#nav-bar{
    width: 100%;
    margin-left: 20%;
}

img{
    max-width: 300px;
}

#nav-bar > ul{
    display: flex;
    justify-content:  space-around;
}

@media (max-width: 700px)
{
    header{
        flex-direction: column;
    }
    #nav-bar > ul{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #nav-bar{
        margin-left: 0px;
    }

    li{
        padding-top: 4px;
    }
}

/* header styling ends here */

/* email styling starts here */

#email-input{
    display: block;
    margin-bottom: 10px;
    padding: 7px 10px 7px 10px;
    font-size: 14px;
    min-width: 300px;
}
#submit-input{
    display: block;
    background-color: rgb(239, 207, 0);
    border: none;
    padding: 5px 10px 5px 10px;
    font-size: 15px;

}
#form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h2{
    text-align: center;
}

/* email styling ends here */
</style>

When I adding position: fixed to #header element to make the header fixed at the top, everything gets messy . I don’t know why this is happening and how to fix this . Please help me to understand this …what’s going on there.

2

Most likely you have other elements overwritting this.
I ussually solute it the next way.
Remove everything expect what you need. To test if it works correctly without anything intervening it.
Does it do what you wanted now?
If yes then you know something else is overwritting it.
No then something in your code is wrong. Check your spelling and compare to correct code.

3

remove it from header // other elements in header
put to
#nav-bar{
width: 30%; // adjust
margin-left: 70%; //adjust
position: fixed; }