What do the two whitespace mixins do, and how do I keep my text from crunching?

[btn0s]

I might have set things up wrong but I'm getting an issue with the setupwhitespace mixin making all my inline-block items and all my text collapse on top of itself, as seen below.

I'm just wondering what I need to do to avoid this? I'm using @extend to pull the styles from reflex.scss... would that be the issue?

[dmoojunk]

I would think the issue is that you have content inside a grid, but not inside a column.

<div class="grid">
    <!--Your content should not be here-->
    <div class="grid__col-12">
        <!-- Should be here -->
    </div>
</div>

[leejordan]

For the inline block fallback I'm using a letter spacing hack to ensure grid consistency. It means that if you don't follow the grid, the letter-spacing never gets set back to it's correct value. There's more info here: #22