Mixing grid and container (vs nested usage) results in differing container width

Bug Report

At a cursory glance, it appears there was a move away from negative margins on grid containers in a recent update. The result of this is that when mixing grid and container the resulting width of that container is different from what we’d get if we just nested a grid inside a container. This resulted in a visual change for me when upgrading from Semantic-UI to Fomantic-UI.

Steps to reproduce

1. Create both of these:

<div class="ui three column grid container">
   <div class="column"></div>
</div>

<div class="ui container">
   <div class="ui three column grid">
      <div class="column"></div>
   </div>
</div>

Expected result

Both versions should have the same width.

Actual result

When viewed with Semantic UI v2.4.1 they will both have the same overall width. When viewed with Fomantic UI v2.7.8 the combined version will have a lesser width (2rem from what I can tell reading the CSS).

Version

2.7.8

[brendon]

Sorry, I missed even more detail in replicating. The column needs to be full-width to trigger it:

SUI: https://jsfiddle.net/4npfjxhL/ FUI: https://jsfiddle.net/neuf05s2/

🤦‍♂

[brendon]

Following this up, it appears related to this commit: https://github.com/fomantic/Fomantic-UI/commit/e3a6bc33005fdd9e4ba3c92863a051e94fb1417e#diff-19a0f29cbd9dd7f8b8b6490361863667R91

Specifically, the specificity of the rest of those selectors in that block needs to match the first (so they should all start with .ui.ui.ui to retain the expected original behaviour. In my case I need:

.ui.ui.grid.container {}

to trump:

.ui.ui.ui.container:not(.fluid) {}