How do I keep my button's presence from pushing down my search bar in html and css?

I'm creating a header. It has a logo on the left side and on the right there are a search bar and corresponding search button. I had already added the logo and search bar. Then I added the button. When I did this it made my search bar move a little down and stick past the confines of my header. It also made the button stick a little up past the viewport. Now it looks like this: My Header

I've tried a few things but it's hard to know what to try when you don't have a clue what principles are causing your problem's existence. I'm new to coding. Here's my html:

    <body>
      <header>
        <div class="container">
          <div class="logo">
            <img src="/Images/logo v2.png" alt="Solo Scriptura Logo"/>
          </div>
          <div class="search-set">
            <form id="s-bar-holder" role="search">
              <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
              <button class="find">
                <img src="/Images/Vector/icons/search-svgrepo-com.svg" />
              </button>
            </form>
          </div>
        </div>
      </header>
      <main></main>
    </body>

Here's my css:

body {
    max-width: 5000px;
    min-width: 500px;
}
header {
    display:flex;
    background-color: rgb(78,78,78);
    margin-top: -8px;
    margin-left: -7px;
    margin-right: -8px;
    height: 60px;
    width: auto;
     
}
.container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
  display: flex;
  align-self: flex-start;
}
.logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#search-bar {
    background-color: rgb(78,78,78);
    color: rgb(0,0,0);
    outline: none;
    height: 58px;
    width: 200px;
    font-size: 18px;
    border-left: 2px solid rgb(86,86,86);
    border-right: none;
    border-top: none;
    border-bottom: none;
    cursor: auto;
}
button {
    border: none;
    background-color: rgb(78,78,78);
}
button > img{
    height: 58px;
    width: 55px;
    overflow: hidden;
}

Thank you for helping.

Solution

You can fix this by adding vertical-align: top to the search bar and button like this:

#search-bar {
     vertical-align: top;
     ...etc.
}
button > img {
     vertical-align: top;
     ...etc.
}

Codepen here