Why svg in is resized changing aspect?

Question

I have the following simple component:

<template>
    <div class='d-flex justify-content-center'>
        <g-image src='~/assets/bitcoin.svg' width='36' height='36' />
        <h2 class='mx-2'>{{ block_count }}</h2>
        <g-image src='~/assets/bitcoin.svg' width='36' height='36' />
    </div>
</template>

(the .svg is around 64 in width and height)

Which in small widths gives nice square images:

but as soon as I start increasing the window size in width it streches out the .svg

I've tried to use a couple of g-image's fit parameters but with no luck.

What am I not getting here?

EDIT Live URL to showcase bitcoin-blocks-info-site.s3-website-eu-west-1.amazonaws.com

EDIT

It seems that when I apply b-container scaffolding then the problem goes away:

<template>
    <b-container>
        <b-row>
            <b-col class='d-flex justify-content-center align-items-center'>
                <g-image src='~/assets/bitcoin.svg' width='36' />
                <h2 class='mx-3 d-inline'>{{ block_count }}</h2>
                <g-image src='~/assets/bitcoin.svg' width='36' />
            </b-col>
        </b-row>
    </b-container>
</template>