When I Zoom out h1 & p display inline

As I am building a WordPress theme for learning purposes, I encountered an issue h1 & p display inline when zooming out.

This is the HTML & PHP code of the front-page that generated the error:

<div class="container__one">    
     <div class="container__one column__one">
          <h1><?php echo get_theme_mod('showcase_heading', 'Default heading') ?></h1>
          <p><?php echo get_theme_mod('showcase_text', 'Default paragraph') ?></p>
                

This is the CSS:

/* Front page 2 columns */

.container__one {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: auto;
    max-width: 960px;
}

.column__one {
    background-color: grey;
    width: 100%;
    height: 80vh; 
}

.column__two {
    width: 100%;
    height: 80vh;
}

@media all and (min-width: 600px) {
    .column__one {
        width: 50%;
        height: 80vh; 
    }
    
    .column__two {
        width: 50%;
        height: 80vh;
    } 
}

Below are two screenshot the first shows h1 & p display in block when at 100%, thus no issue.

The second shows the issue, that is is displayed inline when at 90% zoom.

How can I fix this? I Googled but in vain.

Hey,

i believe its your

.container__one { 
flex-direction: row;
flex-wrap: wrap;
}

it tries to place items in row, if there’s enough space in container they’ll be on one line, if not , they stack