If the main nav has the class of grid-8 which has a width of 66%, shouldn't it take up 66% of the viewport?

No, Its only going to take 66% of its parent's width.

I can't upvote Matthew's comment, but if I could, I would. Width is relative to the containing element unless a different positioning scheme is used.

But it did take 66% of the width. you can check it if you put make a border around it and you will see it did take 66% of the view port width.

The only reason it looks like it takes up 66% of the viewport width is because the "grid-container" class doesn't have a specific width which means that the "grid-container" will stretch the width of the page, which will, in turn, allow each grid placed within the container to have its width applied to the viewport. If you give the "grid-container" class a specified width, that 66% will still apply but you will visibly see that it is not 66% of the viewport; it is 66% of its parent element, the element with class "grid-container".

Yes i meant 66% of the parent container which is "grid-container". But i thought Charlie Person meant why the main-nav not appearing as as 66% wide. So my answer to him was it was the main-nav that streaches not the main-nav list items.

One way to understand what's going on is to change the li items to display: block. You will see that they do indeed take up 66% of .grid-container. Because they are set to inline-block, however, they only take up as much space as is necessary to contain their text; for example, the first child only takes up enough space to contain "Link 1" and whatever additional padding we set. That being said, .main-nav takes up the entire 66% of grid-container that we expect it to. We just don't see that because .main-nav has no background color.