Card qui ne continue pas sa route

Bonsoir,
Je souhaiterais que ma card continue son chemin ici :
Image
En bleu c'est ce que je souhaite que la card fasse

Voici mon code HTML

    <main>
        <div class="container">
            <div class="row-4">
                <div class="col-12">
                    <div class="card">
                        <h1 class="card_title">Hello world #1!</h1>
                        <div class="row">
                            <div class="col-6">
                                Hello
                            </div>
                            <div class="col-6">
                                World!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

Et mon code CSS :

  .container{
        width: 40%;
    }

    .card{
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        height: auto;
    }

    [class*="col-"] {
        float: left;
        padding: 15px 15px 0px 15px;
        margin-bottom: -23px;
    }

    [class*="row-"] {
        margin-bottom: 20px;
    }

    [class*="row-"]:last-child {
        margin-bottom: 0;
    }

    .col-6{
        width: 50%;
    }
    .col-12{
        width: 100%;
    }

En vous remerciant d'avance !