vw unit was used to calculate the width and negative margins needed for the .media--stretched component as it is relative to the window and using % is relative to an elements parent container.
vw does not minus the scrollbar and instead returns the exact width of the entire browser window (without chrome), which caused a horizontal scroll equal to the width of the scroll bar (on non apple browsers).
the affects of this is seen if you remove overflow-x:hidden from the html selector.
no fall back was provided for browser which do not support the vw unit.
OUTLINE
Given "100vw" = 1000
And "body" = 992
And "#mainContent" = 70% of body
And "#contentArea", padding left = 10% of #mainContent
Then ".media--stretched" = 70vw
And ".media--streched", margin-left = -(100vw*0.7)0.1
Acceptance Criteria: #11
SOLUTION
vwunit was used to calculate the width and negative margins needed for the.media--stretchedcomponent as it is relative to the window and using % is relative to an elements parent container.vwdoes not minus the scrollbar and instead returns the exact width of the entire browser window (without chrome), which caused a horizontal scroll equal to the width of the scroll bar (on non apple browsers).overflow-x:hiddenfrom thehtmlselector.vwunit.OUTLINE