Html – Delete space between header and card Bootstrap

I am designing a nice landing/login page for my web app. I am using Bootstrap.

Currently, the page has a header with some text and an image in it. Below it, there is a card containing the login form.

As you can see in the following image, much space is not needed between the two components. I want to delete it in some way.

Here you are my HTML code for the two components:

<header class="bg-primary py-5 text-center">
        <img src="images/logo.png" alt="logo" class="img-responsive brand" />
        <div class="container px-5">
          <div class="row gx-5 justify-content-center">
            <div class="col-lg-6">
              <div class="text-center my-5">
                <h1 class="display-5 fw-bolder text-white mb-2">
                  Welcome Back
                </h1>
                <p class="lead text-white-50 mb-4">
                  Before checking your balance you have to sign in
                </p>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div
        class="container min-vh-100 d-flex justify-content-center align-items-center"
      >
        <form class="card p-3 bg-light">
          <div class="mb-3">
            <div class="input-group flex-nowrap">
              <span class="input-group-text" id="addon-wrapping">@</span>
              <input
                type="text"
                class="form-control"
                placeholder="Username"
                aria-label="Username"
                aria-describedby="addon-wrapping"
                ref="username"
              />
            </div>
          </div>
          <div class="mb-3">
            <input
              type="password"
              class="form-control"
              placeholder="Password"
              id="password"
              ref="password"
            />
          </div>
          <button type="button" class="btn btn-primary" @click="logIn">
            Submit
          </button>
          <hr class="mt-3 mb-3" />
          <p>Need an account? <a href="signup.html">Sign up</a></p>
        </form>
      </div>

And some more custom CSS that may be helpful:

.dropdown-toggle{
    margin-left: 10px;
}

.navbar-brand img {
    max-width: 2.5vw;
    display: block;
    width: 100%;
}

.input-group-btn {
    width: 10px;
}

.img-responsive {
    max-width: 200px;  
    max-height: 400px;
}

.brand {
    height: 120px;
}

Can anyone help me find a way to delete the unnecessary space between the header and the form?

Thank you in advance for your patience.