Fiddle css challenge

issue with the search button to center the value

HTML

<!DOCTYPE html>
<head>
        <link rel="stylesheet" href="./style.css">
</head>

<body>
    <header>
        <div>
            <div>
                <img class="black-heart" src="images/black-heart.png" alt="black heart">
                <span> Nifty Penguin Magic </span>
            </div>
            <nav class="nav-bar">
                <ul>
                    <li> <a href="#">npm Enterprise</a> </li>
                    <li> <a href="#"> Products </a> </li>
                    <li> <a href="#"> Solutions </a> </li>
                    <li> <a href="#"> Resources </a> </li>
                    <li> <a href="#"> Docs </a> </li>
                    <li> <a href="#"> Support </a> </li>
                </ul>
            </nav>
        </div>

        <div>
           <img class="npm-logo" src="images/npm-logo.png" alt="npm logo">

            <form class="search-bar" action="/some-url" method="get">
                <label for="search"><img class="glass" src="images/magnifying-glass.png" alt="magnifying glass"></label>
                <input type="text" id="search" name="search" placeholder="Search packages">
              </form>

            <input class="button" type="button" value="Search">

            <a class="nav-links" href="#">Join</a> <a class="nav-links" href="#">Log in</a> 
        </div>
        
    </header>

    <section id="build">

            <h1>Build amazing things</h1>
      <article>
            <p>Essential JavaScript development tools that help<br> you go to market faster and build powerful<br> applications using modern open source code.</p>
      </article>

        <div>
                <a class="plans" href="#">See plans</a> <a class="join-free" href="#">Join for free</a>
        </div>
    </section>

    <section id="bring">

            <svg class="triangle-hexagon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100.79...

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins');

body {
  font-family: 'Poppins';
}

header > div {
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgray;
  }

  nav {
    width: 600px;
  }
  
  nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 6px;
    width: 600px;
  }

  .npm-logo{
      width: 4%;
      height: 7%;
      margin: 15px 0;
  }

  .glass{
    width: 1.3em;
    height: 1.3em;
    margin: 0px;
    padding: 5px;
  }

#search{
  width: 1300px;
  height: 35px;
  background-color: rgb(240,240,240);
  border: 0;
  padding: 0 10px;
  font-size: 1em;
}

.search-bar label{
  position: absolute;
}

input{
  text-indent: 30px;
}

.button[value]{
  background-color: #fb3e44;
  border-style: none;
  color: white;
  font-size: 1em;
  text-decoration: none;
  padding: 10px 15px;
  }
  
  nav a {
    text-decoration: none;
    color: black;
  }
  
  
  .black-heart {
    width: 20px;
    margin-right: 1rem;
  }

.nav-links{
  color: black;
  text-decoration: none;
  display: flex;
  text-align: end;
  justify-content: flex-end;
  position: inherit;
}

#build {
  background-color: rgba(232,217,217,.3);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

  h1{
      font-size: 4em;
      text-align: center;
      font-weight: 900;
  }

  #build article{
      text-align: center;
  }

#build div{
  margin: 70px 0;
}

  .join-free{
    text-align: center;
    margin: 50px 50px;
    text-decoration: none;
    color: black;
}

  .plans{
      background-color: #FB3B49;
      color: white;
      margin: 15px 15px;
      padding: 10px 40px;
      text-decoration: none;
      box-shadow: 8px 8px 0 rgba(251,59,73,.2);
  }

#bring{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align:...