HTML element position won't change

Issue

I'm working on a "easy" dashboard layout to get in touch with Css better. Now I have the problem my links are next to each othe instead of underneath. `

<div class="column is-one-fourth menu">
                <a href="dashboard.html" class="fxlarge">Dashboard</a>
                <a href="dashboard.html" class="fxlarge">Account</a>
                <a href="dashboard.html" class="fxlarge">Help</a>
                <a href="dashboard.html" class="fxlarge fred">Logout</a>
</div>

My CSS:

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

I'm looking forward for your help, thanks.

I treied to play around with justify-content and align items but nothing helped.

Solution

just set the menu to be flex-direction to column, this will fix your issue.

.menu{
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-direction: column;
}

Answered By - Dean Van Greunen