Text und icon im Button zentrieren

[TecMec]

Hallo Zusammen,

ich bins schon wieder. Mein Spiel ist auch jetzt fast fertig.
Bei einer Sache werde ich aber einfach nicht fündig.

Bei den Buttons links und unten wird mir der Text nicht zentriert im Button angezeigt.
Sämtliche Versuche mit Ausrichtungen sind gescheitert.

Habt Ihr da wieder mal nen Tip für mich?

Code:

HTML (Ausschnitt)
<main>
    <b id="btHinweis0" class="clbtHinweis" style="visibility: hidden;" >Hinweis 1</b>
    <b id="btHinweis1" class="clbtHinweis" style="visibility: hidden;" >Hinweis 2</b>
    <b id="btHinweis2" class="clbtHinweis" style="visibility: hidden;" >Hinweis 3</b>
    <b id="btHinweis3" class="clbtHinweis" style="visibility: hidden;" >Hinweis 4</b>
</main>
<footerr>
    <button onclick="Start()" class="clnavi" id="clbtStart" style="visibility: inline;"><img class="navicon" src="bhome.jpg" alt="Weiter">Start</button>
    <button onclick="nLebensraum()" class="clnavi" id="idnLebensraum" style="visibility: inline;"><img class="navicon" src="bweiter.jpg" alt="nLebensraum">näxter Lebensraum</button>
    <button onclick="Hinweis()" class="clnavi" id="clbtHinweis" style="visibility: inline;"><img class="navicon" src="bweiter.jpg" alt="Hinweise">Noch mehr Hinweise? Weiter drücken</button>
 

Code:

CSS:
body{
    display: grid;
    gap: 0em;
    margin: 0em;
    font-family: sans-serif;
    background-size:contain;
    background-repeat: no-repeat;
}

body{
    grid-template-columns: 350px 1150px;
    grid-template-rows: 740px 140px;
    }


footerl {
    grid-column: 1;
    background: #6d8dac96;
    float: right;
    clear: right;
    padding: 0px;
   
}

footerr {
    grid-column: 2;
    background: #3372b196;
    float: right;
    clear: right;
    padding: 0px;
    justify-content:flex-end;
}

main {
    background: #db7e3b91;
}

aside {
    background: #0f16001c;
    justify-self: left;
}

.clbtHinweis{
    display: inline-block;
    background-color: rgba(5, 58, 5, 0.473);
    border: none;
    border-radius: 15px;
    color: white;
    padding: 15px 35px;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    margin: 100px;
    width: 250px;
}

.Viecherbutton{
    background-color: rgba(5, 58, 5, 0.473);
    width: 350px;
    height: 80px;
    border: none;
    margin-top: 50px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
    text-decoration: none;
    font-size: 30px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-self: center;
}

.icon{
    height: 55px;
    display: inline-flexbox;
    background: transparent;
    align-self: center;
}

.navicon{
    height: 55px;
    display: inline-flexbox;
    background: transparent;
}


.clnavi{
    background-color: grey;
    border: none;
    color: white;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    width: 300px;
    padding-top: 20px;
    align-self: center;
}
#idStatustext{
    float: left;
    color: white;
    padding: 15px 35px;
    width: 280px;
}