When you use anything other than "static" positioning mode, such as "fixed", the width is no longer constrained to the parent's bounding box. What's happening here is that you're creating a DOM element that exceeds the width of the page, and by default, we don't get scroll bars. For example, when you set "width: 100%; margin: 2em", in absolute, fixed, and relative modes, you're asking for an element "100% of the parent element's width plus an addition 4em (2 on each side)".
There's a bit of a monkey wrench in here, though. Because of SLDS, there's a style called
slds-brand-band that you have to beat. In other words, you need a higher specificity. To get that, use an id attribute, not a class style. Also, make sure that you use an outer wrapper element to get the desired width:
<lightning:layoutItem size="12" padding="around-large">
<lightning:card iconName="custom:custom62" title="Test Card">
// May need to be .THIS #fixed, depending on location of element
In this case, the wrapper is set to 100%, and the card is neatly contained inside it, fixed at a point on the screen when you scroll. The direct styles are necessary because the
slds-brand-band, which casts a large web of influence over your components in the Lightning Experience, forces
position: relative onto everything.