How do I fix flexbox not completely centering?

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.

enter image description here

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


@import url(',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!


Someone asked for my HTML so here:

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

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


>Solution :

You added display flex to wrap container with nowrap options.

You need add to .panel { flex-wrap: wrap; } option, or { flex-direction: column; }

Leave a Reply