Why does this happen with .row and .container-fluid in bootstrap?

Thank you for taking a look at my question which is: I'm trying to create two boxes that have the .row class and they are both in a .container-fluid wrapping. Whenever I do this there's a weird space on the right, I don't know if this is a margin that bootstrap adds but from what I understand .container-fluid is supposed to be full screen?

The two boxes are yellow and white, the container-fluid is pink/magenta.

As @Tom suggests, the width of the row elements is "determined" (via css) for you as part of the package. So when one sets the width explicitly even to 100% they are working against what bootstrap is doing. The rose row is the required 30px wider than the blue. I believe that would be true even without the bootstrap javascript but I added it for completeness.