How to I center an image inside of div while left aligning an icon?

Question

In my header section, I would like the image logo centered, but I also want to keep my "X" icon aligned to the left. How do I accomplish this? Centering the logo using grid and margin: auto; cause the icon to be centered, and left aligning the icon also left aligns the logo.

This is the desired outcome:

body{
  margin: 0;
  padding: 0;
}

#signin-page{
    display: grid;
    place-items: center;
    height: 100vh;
    background-color: grey;
}

.signin-form{
    display: grid;
    grid-template-rows: 14% 75% auto;
    height: 90vh;
    width: 50vw;
    margin: auto;
    border-radius: 15px;
    background-color:white;
}

.header{
    display: grid;
    grid-template-columns: 20% auto;
}

.bird-logo{
   
}

.input-pt1{
    border: black solid 1px;
    overflow-y: scroll;
}

.bottom{
}

i{
    margin: 20px 20px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">

<div id="signin-page">
            <div class="signin-form">
                <div class="header">                   
                    <i class="bi bi-x"></i>
                    <img src="" alt="bird" height="40px" width="40px" id="bird-logo"/>
                </div>
                    <form class="input-pt1">
                        part one
                    </form>
                <div class="bottom"></div>
            </div>
        </div>

Answer 1

There are several solutions for that issue. If you want the simpler, you can adjust your .header

body {
  margin: 0;
  padding: 0;
}

#signin-page {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: grey;
}

.signin-form {
  display: grid;
  grid-template-rows: 14% 75% auto;
  height: 90vh;
  width: 50vw;
  margin: auto;
  border-radius: 15px;
  background-color: white;
}

.header {
  display: grid;
  grid-template-columns: 20% auto 20%;
  place-items: center;
}

.bird-logo {}

.input-pt1 {
  border: black solid 1px;
  overflow-y: scroll;
}

.bottom {}

i {
  margin: 20px 20px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">

<div id="signin-page">
  <div class="signin-form">
    <div class="header">
      <i class="bi bi-x-lg"></i>
      <i class="bi bi-twitter"></i>
    </div>
    <form class="input-pt1">
      part one
    </form>
    <div class="bottom"></div>
  </div>
</div>

to this:

.header {
  display: grid;
  grid-template-columns: 20% auto 20%;
  place-items: center;
}