“The calc() function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:”
Ya, I think the wording on that could be better. 100% width is the available with for the element based on the width of the nearest block level parent. If that parent happens to be as wide as the view port then 100% width will be the same as the width of view port. Otherwise, 100% is only as wide as the parent.
The margin was set to margin: 10px which means that all four margins are 10px so the total side margin is left margin + right margin or 20px.