Div alignment

[prismaticpink]

Hi! I don't know if this is the correct title, but I'll try to explain my problem.
This is my website: https://prismatic.pink/
I am using divs as a background to h2 titles.

This is how it looks like on my computer. I want it to look like this on other screens.

Spoiler

[close]

This is how it looks like on my phone (and it looks kinda similar on my iPad and on my husband's computer as well).

Spoiler

[close]

This is my CSS so far:

Code

.widget-title {
	background-image: url('http://prismatic.pink/wp-content/uploads/2024/11/bg-rainbow.gif');
	border-radius: 7px;
	border: 1px solid #736026;
	margin: 1.5em 0em 1.5em 0em;
	height: 1.8em;
	text-align: center;
}

.widget-title h2 {
	color: white;
	text-shadow: 1px 0px #736026, -1px 0px #736026, 0px 1px #736026, 0px -1px #736026;
	margin: -0.5em 0em 0em 0em;
}

I know that using a negative value in "margin" isn't the best idea, but it was totally misplaced without it.
Sorry if it's a stupid question, I'm a beginner 

[Melooon]

Different browsers will have different default margins and padding, so that's prob what your running into; you don't actually need to use a div as a background though, you should just be able to put everything on the h2 and call it a day! That avoids the whole issue 

Code

.column-2 h2,
.column-3 h2 {
  color: white;
  text-shadow: 1px 0px #736026, -1px 0px #736026, 0px 1px #736026, 0px -1px #736026;
  background-image: url('/wp-content/uploads/2024/11/bg-rainbow.gif');
  border-radius: 7px;
  border: 1px solid #736026;
  margin: 0.8em 0em;
  height: 1.1em;
  text-align: center;
}

EDIT: Also also, I noticed you changed the universal line-height to 1.5, and everything on the layout is depending on that; that's fine, but I think it might cause you headaches later on - you might wanna rework that and only change line height on specific areas such as p tags or your context boxes ^^

[Dreamwings]

I initially thought it was the line header but I think it might be the margin on the h2 element. It's showing for me as well on my laptop on Librewolf so I was able to mess around a bit. The negative margin is what's doing it because when I remove it it goes back to the proper orientation inside the box. I think it's because it's going off the font size in comparison to screen size so if the screen is a completely different size from what you made it on it doesn't like that too much and does that on every other screen.
As for what to do about it, besides setting all the margins to zero which still leads to the font being a little down towards the bottom, I found a solution close to what I think you want. I added to the div...

Code

box-sizing: border-box;
padding-bottom: 2em;

Which still keeps it in the center and based on the font size like you want it to be.
Btw, I LOVE the layout its sooo cute! The rainbow divs are so pretty and they remind me of those rainbow airhead strip things they used to have.
Edit: And someone else seems to have posted a response before me so lol I guess you could use both depending on what implementation you wanna go with.

[prismaticpink]

Guys, thank you so much for your help! I tried both Melon's and Dreamwings' suggestions and it works fine on my phone/iPad/husband's pc, but now my laptop looks messed up. lol

Spoiler

[close]

I guess I'll leave it the way it is, it seems to be fine on most screens, so whatever. haha

Btw, I LOVE the layout its sooo cute! The rainbow divs are so pretty and they remind me of those rainbow airhead strip things they used to have.

Thank you so much!! I drew them myself and I wanted them to look "candy-like". I'm glad I was successful hehe

EDIT:

EDIT: Also also, I noticed you changed the universal line-height to 1.5, and everything on the layout is depending on that; that's fine, but I think it might cause you headaches later on - you might wanna rework that and only change line height on specific areas such as p tags or your context boxes ^^

That's it!!! I removed it and now it's fixed. Thank you so much