CSS wont center my elements if I put a font awesome icon

Question

I have this here that is supposed to show the check font awesome icon side by side with the in stock text, but when I do this it doesnt show in the center but it shows near the center.

.grid-container {
  margin: auto;
  display: flex;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="grid-container">
    <h4 style="width:50%;margin:0 auto;">
        <span class="fa fa-check-circle"></span>&nbsp;In stock
    </h4>
</div>

It shows up near the right side of the screen, but not in the center — Pika, Jul 28 '20 at 23:55
@Pika a screenshot would really help, because I am not sure what you want to achieve. — Mihail Minkov, Jul 29 '20 at 04:07

score -1 · Answer 1 · answered Jul 29 '20 at 00:07

-1

You've to display: block the .grid-container

.grid-container{ display: block; margin: 0 auto;}

answered Jul 29 '20 at 00:07

analogbeing

28
1
7

CSS wont center my elements if I put a font awesome icon

1 Answers1