Resizing issue, not staying centered

[troyb16]

My h1 and img inside my header at the top of the page are normally centered but once you resize to around 525px or under it seems to move to the left side of the page. I’m not sure why this is happening.

Any and all help would be appreciated!!!

CodePen: https://codepen.io/troy_b16/pen/dyZWbNN

[suarezramirof]

When text wraps, width of h1 “stays” the same. That is to say, the width of h1, is larger than the text inside it once it wraps. So it won’t be centered. If you use:

    h1 {
        inline-size: min-content;
    }

the width of h1 is that of the longest word, and it’s centered even in a viewport below 530 px wide. BUT, it’s width is also limited for wider viewports.

One solution would be adding:

@media (max-width: 530px) {
    h1 {
        inline-size: min-content;
    }
}

[troyb16]

I’m not sure why exactly it works but it works! I’ll have to look more into this. I have one issue that is created with this solution though and that is I don’t like the Subaru logo being beside the text like that, it makes the text seem like it’s still slightly not centered the way it should be. How would I get the logo to stack on top of the text?

[troyb16]

I figured it out! I made some changes to achieve this.

I changed the header which contains the img and the h1 to display: block; which put them on their own lines, then I put the img in a p tag and set both the h1 and p to text-align: center; to get them both centered and then got rid of some margin on both to get them to where I wanted them.

@media (max-width: 530px) {
    h1 {
        text-align: center;
        margin-top: 0;
    }

    header {
        display: block;
    }

    #nav-bar p {
        text-align: center;
        margin-bottom: 0;
    }
}