why are these elements out of alignment?

[fairyrune]

ahhhh i feel like i'm goin crazy!!!

i have some html for my index page i'm setting up and i'm trying to make a big, main div set the width for all elements under it. like the main div would be 950px, and if i set everything under it to 100%, then it'd also be 950px.

but it's out of alignment!!

how is this happening?? i am entirely self taught on scraps of code and old knowledge so i imagine i'm forgetting something important.



hopefully, this shows what i mean!!

[IndigoGolem]

I'm pretty sure setting the height of <html> doesn't do anything. You'd want to set the height (and width, if that's not just 100%) of the <body>. And height doesn't like to just work in my experience, you have to use different units like vh (view height, percent of the window's height) or px (pixels). That said, i also didn't think you could set a background image by styling <html> and you made that work. So feel free to not listen to me, i don't know what i'm doing.

Since the width of the flexbox and mainbox are supposed to be 950px, you could try just setting that in px. That will make the site harder to use on very small screens, but i think anything bigger than a cell phone or NDS should still display it fine.

And i think i see your problem. The mainbox is set to be 400px wide in index.css. Changing that to 100% makes it take up the full flexbox, at least here in LibreWolf (and Firefox).

[fairyrune]

And i think i see your problem. The mainbox is set to be 400px wide in index.css. Changing that to 100% makes it take up the full flexbox, at least here in LibreWolf (and Firefox).

ohhh i should add a bit more to my main post, i think. the problem is that the flexbox's right border isn't aligning with the titlebar, and the image between them is also out of alignment. (there's a dozen ways i could style the image there i know  )

my only guess is. perhaps the padding...? i had issues with that adjusting the width. but it wouldn't explain the image - i checked and the image has no stray transparency sitting at the left side... ?!

also: i have NO idea where that height came from. that's bizarre LOL why did i put that there? who knows. but you're correct, it doesn't seem to do anything!

[akchizar]

You've got a box-sizing issue! Your image's width is set without considering its padding (which is 5px on either side). If you set its box-sizing to border-box (as your following div is), it should line up again.

[fairyrune]

You've got a box-sizing issue! Your image's width is set without considering its padding (which is 5px on either side). If you set its box-sizing to border-box (as your following div is), it should line up again.

bless you!! adding box-sizing: border-box to all the affected elements sorted it! thank you :) padding is my NEMESIS lol