Why does my have padding I have not applied?

Question

I want to create a navbar that is split into 2 parts, one side having the icon for bars and the other having the company name. I have the icon declared at 20% and the name at 80% but these do not align. On the web inspector, the icon seems to have padding applied to the right of it like so:

But the padding is not applied to name :

Here is the HTML:

<div class="smallHeader">
    <div class="menuBars">
        <span class="fas fa-bars"></span>
    </div>

    <div class="title">
        <i class="fas fa-microphone-alt"></i>
        <span>{{ config('app.name', 'OnAirCasts') }}</span>
    </div>

    <div class="clearFix"></div>
</div>

And here is the CSS:

/*--- Small Nav bar ---*/
.smallHeader{
    width: 100%;
}

.menuBars {
    width: 20%;
    text-align: center;
}

.title {
    width: 80%;
    float: left;
    text-align: center;
}

Why is this padding being added?

Answer 1

.smallHeader{
    width: 100%;
    display: flex;
}

Answer 2

Most likely the origin of the padding comes from another element, inspect the inner element (maybe the text in your span).

You could also try to set a fixed height for the .title class