Bug White-space?

What is creating the white-space between "333" & "444"?
And how can I fix this?
Thanks!

CodePen: https://codepen.io/touhid_rahman/pen/xxzrKzK

<div class="hello ac">
        <button class="btn fl">111</button>
        <button class="btn fl">222</button>
        <button class="btn">333</button>
        <button class="btn">444</button>
        <button class="btn fr">666</button>
        <button class="btn fr">555</button>
</div>

<div class="hello ac">
        <button class="btn fl">111</button>
        <button class="btn fl">222</button>
        <button class="btn">333</button>
        <button class="btn">444</button>
        <button class="btn fr">666</button>
        <button class="btn fr">555</button>
</div>

<div class="hello ac">
        <button class="btn fl">111</button>
        <button class="btn fl">222</button>
        <button class="btn">333</button>
        <button class="btn">444</button>
        <button class="btn fr">666</button>
        <button class="btn fr">555</button>
</div>

<div class="hello ac">
        <button class="btn fl">111</button>
        <button class="btn fl">222</button>
        <button class="btn">333</button>
        <button class="btn">444</button>
        <button class="btn fr">666</button>
        <button class="btn fr">555</button>
</div>

.hello {
    outline: 3px solid red;
}
.hello::after {
    clear: both;
    content: "";
    display: table;
}
.btn {
        border:0;
        margin:0;
    background-color: #0d6efd;
    color: #fff;
    font-size: 2rem;
        cursor:pointer;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.ac {
    text-align: center;
}

.hello {
    outline: 3px solid red;
}
.hello::after {
    clear: both;
    content: "";
    display: table;
}
.btn {
        border:0;
        margin:0;
    background-color: #0d6efd;
    color: #fff;
    font-size: 2rem;
        cursor:pointer;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.ac {
    text-align: center;
}

.hello {
    outline: 3px solid red;
}
.hello::after {
    clear: both;
    content: "";
    display: table;
}
.btn {
        border:0;
        margin:0;
    background-color: #0d6efd;
    color: #fff;
    font-size: 2rem;
        cursor:pointer;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.ac {
    text-align: center;
}