Beginner question about padding/margins on elements to make them fit edges of the screen.
So when trying to make the background of an image or header fill the entire screen, I seem to have to put margin-left: -8px and margin-right: -8px. At 0px there's a small gap on the left and right edges of the screen. The element at the top of the screen I also have to put margin-top: 18px on. I feel like this can't be the intended way to do things and there's something obvious I'm missing but I'm not sure what. Also suspect my workaround might not work on different resolution screens. Putting padding to 0 doesn't fix it either. Googling this comes up with a lot of other people with the same issue but everyone just says to set margin and padding to 0.
Here's the code for my header for example:
text-align: center;
background-color: rgb(160, 20, 0);
padding-top: 8px;
padding-bottom: 8px;
margin-left: -8px;
margin-right: -8px;
Setting padding left and right to 0 has no effect, which I assume means they are already 0.
Is there something obviously dumb I've done? I've only just started learning CSS so I assume I've missed something pretty fundamental. Thanks.