Having trouble with centering my H1 mainheader

Hello guys,

im having trouble with the positioning of my H1.
I created a single container just for my header with display: flex;
Inside that container i want to center my header.
It all looks like this:
.container1 {
display: flex;
height: 8vh;
margin-bottom: 12px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

h1 {
color: #E8E63A;
text-shadow: 3px 3px black;
font-family: “Gill Sans”, sans-serif;
font-size: 50px;
text-align: center;

Now when i switch to my Laptop, the header is on a different location, underneath the container.
I also created a media query with a max-width of 620px for a font-size of 30px.
So when im on my phone everything seems fine.
On my Laptop the header is out of position tho.
Everything else is okay.
What could be the reason since when i resize the screensize on CodePen to the size of my Laptop everything is on the right position.
im kinda confused

You did make a container for the h1 tag and added display: flex to it. For centering the h1 you also need to add justify-content: center on the container.

Another way could also be using margin: 0 auto on the h1;

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