[Segment/Table] Some Attached Off by 1px

[brianjenkins94]

I'm having an alignment issue with the version of Semantic UI served from https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.css.

When populating a grid with elements such as ui top attached vertical menu and ui bottom attached compact menu the resulting rendered elements do not appear to line up properly.

My suspicion is that there is an off-by-one error related to a negative margin value.

I have provided the code I am working with in the following codepen: http://codepen.io/brianjenkins94/pen/LkzGBp

And I've got to say, I've only been using Semantic UI for two days now and I love it. Keep up the great work!

Edit: I just updated to 2.2.2 and the problem persists. Additionally, I neglected to mention the following:

---

Google Chrome: 51.0.2704.103 (Official Build) (64-bit)
OS: Mac OS X 10.11.5 El Capitan
JavaScript: V8 5.1.281.65

[wyemun]

Confirmed. It happens to .ui.table too

[brianjenkins94]

Just realized it's happening on the example site Attached Content too.

[jlukic]

@brianjenkins94

If you swap each menu in your code to use fluid and remove the inline css it doesnt have the alignement issues.

There was an adjacent issue with (x) item attached menu
http://jsfiddle.net/hpxg905w/

I've gone ahead and fixed that issue in the below commit in 2.2.11