How do I fix flexbox not completely centering?

May 1, 2022

So I am attempting to make a sort of pane that has some UI, like a landing page. But I have a problem as follows.

In this picture, I have the top element which is perfect, but the test element wont center element wont align correctly. How can I fix this so its centered?

The top bar’s class is panelHeader
The unaligned class is panelContent
the entire panel class is panel

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,100;1,400&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

main {
    background: linear-gradient(to left top, rgba(87, 171, 235, 0.6), rgba(87, 171, 235, 0.9));
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel {
    background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255, 0.3));
    min-height: 90vh;
    width: 95%;
    background: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255, 0.3));
    border-radius: 2rem;
    z-index: 2;
    backdrop-filter: blur(2rem);
    display: flex;
    justify-content: center;
}


.panelHeader {
    display: flex;
    justify-content: center;
    font-size: 40px;
    padding-top: 20px;
    animation: 0.45s ease-in 0s 1 slideInTop;
}

.panelContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes slideInTop {
    0% {
      transform: translateY(-20%);
    }
    100% {
      transform: translateY(0);
    }
  }

Thank you!

EDIT

Someone asked for my HTML so here:


<!DOCTYPE html>
<html>
    <head>
        <title>Tyler TV: Streaming</title>
        <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
        <main>
            <section class="panel">
                <div class="panelHeader">
                    <h1>Tyler TV.  Stream Today, Watch Tommorow.</h1>
                </div>
                <div class="panelContent">
                    <h1>test</h1>
                </div>
            </section>
        </main>

        
    </body>
</html>