I need to center-left a < h1 > element inside a < section >, however, I’m struggling finding the correct method.

I’ve tried using justify-content and text-align, but it doesn’t move it. I can move with it padding, but, I’m not sure this is good responsively.

HTML:

<section class="hero">
  <h1 class="hero__title">My Website</h1>
  <img
    class="hero__image"
    src="./assets/images/hero-bio.jpg"
    alt="hero-image"
  />
</section>

SCSS:

    .hero {
  width: 100%;
  height: 700px;
  position: relative;

  &__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  &__title {
    color: white;
    font-size: 6rem;
    position: absolute;
  }
}

>Solution :

Using top: 50% would work in your current situation.