Why is the style only applied after a cache flush?

Question

css

<div class="d-flex text-success">
    <div>
        <img src="/images/avatars/<?= $user->avatar ?>.jpg" class="h-100" alt="avatar">
    </div>
    <div class="text-left flex-grow-1 pl-1">
        Страна
        <div class="float-right"><?= $country->name ?></div>
    </div>
</div>

Loading: The country is pressed to the left to ava, now we press [Ctrl+F5] - it works out the text indentation on the left .pl-1, now we just refresh the page - The country is again pressed to the left to ava.

What's the matter?

Answer 1

Most likely you meant it, then the problem is here:

.form {
 position: absolute;
}

Change to relative

Answer 2

Remove the h-100 class from the img tag.
Or like this:

...
<img src="/images/avatars/<?= $user->avatar ?>.jpg" class="img-fluid" alt="avatar">
...