Can anyone tell me why this looks so squished together?

Hi, i just want to center my div.container but this looks very wrong

<style>
    .white-text {
        color: #fff !important;
    }

    #mainPage {
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

    .card-panel {
        border-radius: 15px 50px 15px 30px;
    }
</style>

<div class="container" id="mainPage">
    <div class="leaderboard">
        <span class="white-text">
            <div style="margin-top: 30px;" class="row">
                <div class="col s6">
                    <div class="card-panel green">
                        <i class="material-icons large right">attach_money</i>
                        <h3>Meistes Geld</h3><br>
                        <div id="lead-money">
                        </div>
                    </div>
                </div>
            </div>
        </span>
    </div>
</div>