title: Center title over section with multiple image?
body: <p>Im have a section (StyledHead) where im mapping out 10 images from an api. I have another section (StyledHeader) wrapping it where I also have a h1. How do I center the h1 both ways so its center over the images?</p>
  <p>Styling:</p>
  <pre><code>const StyledHeader = styled.header`
    width: 60%;
    max-width: 1200px;
    margin: auto;
  `;
  
  const StyledHead = styled.section`
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 5px;
    grid-template-rows: 1fr;
    width: 100%;
    opacity: 0.7;
    img {
      height: 100%;
      width: 100%;
    }
  `;
  </code></pre>
  <p>The code:</p>
  <pre><code>&lt;StyledHeader&gt;
          &lt;h1&gt;Sidetittel&lt;/h1&gt;
          {loading ? &lt;p&gt;laster...&lt;/p&gt; : null}
          &lt;StyledHead&gt;
            {data.Search?.length &gt; 0
              ? data.Search.slice(0, 10).map((items) =&gt; (
                  &lt;img key={uuid()} alt=&quot;filmplakat&quot; src={items.Poster} /&gt;
                ))
              : null}
          &lt;/StyledHead&gt;
        &lt;/StyledHeader&gt;
  </code></pre>