Image centering with CSS grid and Proper SEO

I am a little confused about getting my “logo image” centered in the top left two grid areas (logo) for tablet landscape and larger. Below is a screen shot from FF showing the grid.

Here is an image of how I want the site to look:

The site is built in Gatsby.js, uses SCSS, and is deployed to Netlify. I was trying to figure out how to get the .html and .css file from the /public folder to post here, but am out of time on my lunch.

The site is here. You can see the CSS and HTML using your favorite web inspector.

The Github repo is here for people that know Gatsby & SCSS:

Also wondering about the image wrapped in the H1. I probably dont need to worry about SEO for my low traffic site, but I like to do every thing the best way possible.

Thank you

Is it that you want the words to flow down to a different line when at a smaller pixel dimension? You might want to wrap each word or letter in their own div.

You need to move the grid properties up to the cover__logo-container, it is the grid item, not the image. You will have to make some adjustments to the image size.

@media only screen and (min-width: 50em) {
    .cover__logo-container {
        grid-area: logo;
        align-self: center;

Thank you. My images may be a little confusing. I am trying to center an image in 2 grid columns.

Again, your image is not a grid item. Only the direct children of the grid container are grid items. Non of the grid properties you have on .cover__logo does anything.

I moved the .cover__logo-container to the h1, fixed the css, and got things working! Thank you lasjorg!