What I am trying to do is simple: I want my text to be centered inside a bootstrap badge. However, even when I try all the CSS and bootstrap ways to do it, nothing seems to change.

.area-value {
    display: flex;
    border: 1px solid blue;
    /*flex-flow: column;*/
}

.area {
    margin: 0;
    font-size: 15px !important;
    /*position: absolute;*/
}

I suspect it has something to do with the flex/stretch property because when I set the position to be absolute I get this:

What can I do about this?