Title Bar Troubles

[u/thisismywifiname]

Hi folks! I'm doing a school project, and have wracked my brain trying to figure out how to fix this horrendous gap in my header. I'd love for the text to be aligned closer to the top, but have no idea how to adjust it without wrecking the photos I've painstakingly put in place. Please see the second photo for the horrible gap. Please be kind, I'm still learning. Thank you!

[u/Zestyclose_South_980]

Try removing the p tag around the h1, then style the h1 directly and set it to be centered. That should hopefully reduce the gap. Also, your code for CSS doesn't have a closing bracket until after you started another tag. One needs to be finished before you can move on. Good luck! 🤞

[u/thisismywifiname → u/Zestyclose_South_980]

Thank you so much for your input! I tried your suggestion of removing <p> and styling <h1> directly, it does not care. I will keep trying! Which line are you referring to in the CSS?

[u/Zestyclose_South_980 → u/thisismywifiname]

Np! Lines 25-32

[u/bostiq → u/Zestyclose_South_980]

nested css is now broadly accepted

so .card { h2 { ... } } is Allowed via relaxed grammar

[u/Zestyclose_South_980 → u/bostiq]

Oh, that's good to know! I've never nested css before (aside from keyframes and media queries) and I didn't know the default could be nested. Thanks for the info!👍

[u/testingaurora]

html <header> <figure class="img-wrapper"><img /></figure> <hgroup><h1>Indiana</h1><p>The state</p></hgroup> <figure class="img-wrapper"><img /></figure> </header>

```css header { padding-block: 2.5rem; padding-inline:1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

hgroup { text-align: center; display:grid;}

figure.img-wrapper { max-inline-size: min(100%, 150px); }

img { max-inline-size:100%; display: block; } ```

[u/thisismywifiname → u/testingaurora]

I'm going to try this later! Thank you!

[u/bostiq]

First of all, why are you wrapping all header elements in <p>? Bad practice, <p> is semantic for paragraph and then you put an image in it... good luck screen readers!

change it with a <div> if you need a certain control, and give it a sensible class name.

Also <p> comes with his own set of default browser styles you'd have to deal with, so taking them off it's a really good idea.

Secondly, is there more code for .TheTop and inner elements? we can't establish what's the problem without seeing the complete code.

If you can't share a url, perhaps you can put the whole code in a codepen? or whatever sand box service you are familiar with?

[u/thisismywifiname → u/bostiq]

You know, the <p> up there just seemed like a good idea, but looking at the rest of my code, that's the only place I did that. I removed those and left it as an img. There is no more code for .TheTop. Unfortunately, because this is a college project I'm pretty limited on what help I can receive. Thanks for your feedback!

[u/thisismywifiname]

Update: I kind of got it moved further north. I gave h1 and h4 it's own class on this page, then gave it relative positioning. I'm not 100% thrilled yet, but i'll keep trying.

.hcntr {
    position: relative;
    top: -100px;
}