Mobile vs Desktop CSS Negative Margin for ".row" Inconsistent

[mattnish]

Perhaps I am missing something, but could you please explain why on desktop the columns' content lines up with the container's edges perfectly and on mobile it doesn't?

On desktop, using the .row's -15px margin and the columns 15px padding makes the column line up with the container. Awesome. On mobile, though, the .row no longer has the -15px margin, and so the column automatically is pushed in 15px. This is problematic on designs that need to go the full 100% on both desktop and mobile. Am I missing something?

Thanks!

Desktop:

Mobile:

[mattnish]

For now, I'm just applying "margin-left:-15px;margin-right:-15px;" to .row globally for all screen sizes.

[fabiogiolito]

It seems intentional by the way the css was written.

On small devices the .container width is 100%, to prevent content from touching the viewport edges there's no negative margin.

On medium+ devices the .container has a fixed width so content won't touch the edges anyway. In this case there are negative margins to keep the row's width = container's width.

If you want it to touch the edges you can either put content outside the grid, or add the negative margins manually like you're doing.

[mdo]

What @fabiogiolito said.