[grid] double gutter in nested stackable grids

[hugopeek]

Bug Report

Stackable grids inside a parent grid receive a negative left/right margin, in order to align properly with the parent grid.

This negative margin is overruled however, by the changes in this PR: https://github.com/fomantic/Fomantic-UI/pull/1739/files

The specificity is now too high, so the !important values of the negative margins are no longer applied.

Steps to reproduce

See the following fiddle: https://jsfiddle.net/gtc4o5zr/3/

Fomantic-UI/src/definitions/collections/grid.less

Lines 1692 to 1696 in e4f0699

	.ui.ui.ui.ui.stackable.grid {
	width: auto;
	margin-left: 0 !important;
	margin-right: 0 !important;
	}

If you disable the negative margins here, or remove the added .ui classes, things go back to normal.

Expected result

There should be no gutter between the parent and inner grid.

Actual result

There is another gutter between the parent and inner grid.

Testcase

https://jsfiddle.net/gtc4o5zr/3/

Version

2.9.0-beta.96

Loosely related: Semantic-Org/Semantic-UI#5170

[lubber-de]

Should be fixed by #2269
See your adjusted jsfiddle here https://jsfiddle.net/lubber/bkrqfnhv/2/