How do i fix monospace spaces not being correct width in Android Chrome/Firefox?

I was playing around with a site that shows an ASCII/ANSI art logo and everything seems to work great in desktop browsers.

Then I wanted to see if it works on mobile devices but here it seems like the whitespaces are of a wrong width. The part of the website showing the ASCII-art is wrapped in a <div> with following CSS properties:

line-height:1em;
color: #ff791a; 
white-space: pre !important;
font-size: 0.7vw; 
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;

I have tried with several variations of fonts like "Druid Sans Mono", monospace (also the monospace, monospace hack), "Courier" and "Roboto Mono" but none of them worked.

I also tried using nbsp instead of just spaces. changing letter-spacing also did not seem to have the effect I wanted.

Is there any trick to get this to work ?

you can see the site here disconnected.tech

from How do i fix monospace spaces not being correct width in Android Chrome/Firefox?