Grid layout - row

I want the text on the left and the image on the right, but my grid layout using row is not working out. What can I do? It was working, but I do not know what I did, and now I can’t fix it. I appreciate your help, guys.

<div class="row">
        <div class="contentWrapper">
            <div class="content">
                <h1>Plantas con macetas que cambian vidas</h1>
                <h2>Tu la quieres, nosotros la creamos</h2>
                <a href="whatsapp://send?phone=573112533441&text=Hola, quisiera ordenar una plantica con maceta" target="_blank" class="order-button">Quiero la mía</a>
        <div class="imgWrapper">
            <img src="coconut_inicio.png" alt="">

.row {
    width: 80%;
    max-width: 1170px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px;
    overflow-x: hidden;
    padding: 5rem 0;

.row .imgWrapper {
    overflow: hidden;

.row .imgWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;

.row .contentWrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 30px;

.row .contentWrapper h1 {
    font-size: 70px;
    font-weight: 700;
    padding-bottom: 20px;

.row .contentWrapper h2 {
    font-size: 40px;
    padding-bottom: 25px;

Hello @santiagomarin0716 !

I simply copied and pasted your code in a codepen. The codepen generated preview looks like the result you state you are attempting to achieve. Perhaps the issue lies elsewhere?

Does this help?

1 Like

Yes, I am not sure where it was, but I could solve it. Thank you so much.

1 Like

Pleasure. Keep on coding brother.