Hero image not centered

Question

I have this code pen: Code Pen

But it seems that the image is not centered when I reduce the screen size but should not be centering like this:

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90vh;
  padding: 1em;
  box-sizing: border-box;
  color: white;
  background: url("./assets/hero2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

and my HTML

<section class="hero">
      <h1 id="header">
        Vuokrausasemalla asukkaiden tarvitsemat tavarat ja laitteet yhteiskäyttöön
      </h1>
      <article class="hero-header">
        <p>Parannamme elämänlaatua kasvattamatta hiilijalanjälkeä. Säästämme taloyhtiön asukkaiden kaappitilaa, rahaa ja aikaa tekemällä vuokraamisesta omistamista helpompaa.</p>
      </article>
     
        <form action="submit" class="hero-footer">
          <input type="text" placeholder="Sähköposti">
          <button>Tilaa uutiskirje</button>
        </form>
      
    </section> 

Should work? Thanks in advance

Answer 1

If I understand you correctly, you need to specify background-size to cover both on x and y: background-size: cover cover;.

This way, you're sacrificing the image edges to fully cover all axes of the container no matter the screen size.