Alignment problem with main tag and header

HTML-CSS
1

I’m trying to understand what’s going on here

image

I’ve created a code pen which includes my code and replicates the problem.

My main tags have some basic formatting and so does the logo and header container. The formatting is almost identical, but the logo-header-container is the grandchild of the body and the main tags are children of the body.

the logo header containers parent is a fixed element with top and left set to 0.

Is this what is causing the off balance? Any ideas on a work around?

2

exactly , in which part you need help

3

my main tag doesn’t align with my logo-header-container.

Do you know how to get them to align in a responsive way? (the simpler the fix the better)

4

you want to remove this empty space between your head and main tag

image
image921×717 11.2 KB

then use margin-top property
output will look like this

image
image923×791 16.2 KB

you can use as much you want i have used

margin-top : -200px;
5

Ah no i meant this space… (the first post picture)

image

It’s a little hard to spot, but theres an alignment problem

6

For more clarity.

I was hoping someone could check my container vs section tags and offer their thoughts on what might be causing the issue. Here is my code for the nav container.

.logo-header-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    max-width: 1400px;
    margin: 2em auto 0 auto;
    border: solid black 2px;
}

And here is my section code

section {
    width: 100%;
    display: flex;
    flex-direction: initial;
    place-content: center center;
    border: solid black 2px;
}
7

Your box-sizing code is broken. You are missing the commas between the elements in the selector.

*,
*::before,
*::after {
  box-sizing: inherit;
}
1 Like
8

Thank you so much. I need to read up on selector syntax…

Really appreciate that pointer @lasjorg

1 Like
9

The selector list syntax is pretty straightforward, each selector is separated by a comma. I saw your other page and you got it right there, so maybe this was just an oversight.

w3schools has a handy selectors list as well (one of the few times I can actually recommend referring to them)

1 Like
10

I definitely am aware that there’s a difference between comma/no comma but now I know to revisit that.

Do you have another documentation guide you’de recommend… maybe mozilla?

11

Everything on MDN is worth a read. You can start at the beginning CSS guide and work your way through.

I’m sure you know of the CSS Tricks website and maybe some of the more famous CSS YouTubers like Kevin Powell.

Here are some more links.

https://learn.shayhowe.com/advanced-html-css/complex-selectors/

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.