Hello!
I am trying to improve my “Portfolio” project, and am struggling with trying to make my content full page width, as in the project solution (https://codepen.io/freeCodeCamp/full/zNBOYG). Link to my in-progress project is: https://codepen.io/sloth777/full/WNbybjx
My navbar element is sizing to full column width, and I have also set the width property for to 100%, so I was not sure what I was doing wrong.
Thanks!
ST
Welcome to the forum!
I took a screen capture of what I see when i right-click/inspector (Google Chrome, other browsers should be similar).
Hope this helps 
Thank you for your quick response and pointing me to understanding what was going on (sorry for not replying sooner)!
I added the following to my CSS, and now it displays without any margin:
html, body {
margin: 0;
}
I looked through my code and did not find any place where I had added a margin, so was curious where it might have been picking up the 8px value from? For future reference, is the margin property something I should be setting always if I want it full width?
Thanks!
The 8px is the default margin added by the browser default styles. You will see this on other elements like margin on headers or margin and padding on list elements etc.
Other than knowing about the default styles one tool you should learn is the Inspector (Chrome or Firefox) it is super helpful in better understanding your layout and the box model. I suggest learning the browser developer tools (Video) as much as possible.
Understood and I will definitely take a look at the video and info on developer tools page.
As far as margin goes, is there a best practice on keeping it at the default, or is it more a case by case basis?
Thanks!
A lot of people use a short universal CSS reset at the top of the CSS file that removes all padding and margin on all elements.
* {
margin: 0;
padding: 0;
}
Just be aware that all elements you are used to having some margin will not have any and you will need to manually set the margin.
Understood, thank you!