css - Monospace font on body breaks layout

I'm using Toast in order to have a simple grid system in a project. Most of the text on the site will be in a monospace font, so I've given the body this font like so:

body {
   font-family:"MonoSpaceFont", monospace;

}

I then for example give two divs the class of .grid__col.grid__col--2-of-4. That gives the two divs 50% in width and they should appear next to eachother. However, with the monospace font set on the body, the layout breaks. As if the two divs are a nudge to wide for them to fit next to eachother. I can manually set width: 49.8% or similar to them and that works. So for some reason, the divs become wider with the monospace font.

Codepen: https://codepen.io/tobiasger/pen/mdbwLrb

I've never experienced this problem before. It feels like a bug, but maybe this is expected behaviour? I would like to know if there is any way of working around this problem?