In my website, I’m trying to get “display: inline-block” to work with my images to put them next to each other, but they display over top of each other still, and slightly off-center for some reason. Any help?

My code:

<style>
    .inline {
        display: inline-block;
    }
</style>
--snip--
<div style="text-align:center" class="inline">
    <img src="https://dl.flathub.org/media/org/godotengine/Godot.desktop/f3bfa94e0d33cf1cec74d0406b86879c/icons/128x128@2/org.godotengine.Godot.desktop.png" width=25% class="rounded inline">
</div>
<div style="text-align:center" class="inline">
    <img src="https://dl.flathub.org/media/org/godotengine/Godot.desktop/f3bfa94e0d33cf1cec74d0406b86879c/icons/128x128@2/org.godotengine.Godot.desktop.png" width=25% class="rounded inline">
</div>

The result:
The two images overtop each other, slightly off-center

I tried putting the class in just the images, which fixed the being off-center issue, but they were still on top of each other.
I also put both the divs inside another “parent” div, which did nothing.
I then put the class in only the divs, which also fixed nothing.
These were all done in an attempt to fix the problem.