CSS full width header (Full width, cannot see body background)

I've seen this question asked many times but when I try to implement their solution it doesn't seem to work.

I am currently starting to dabble in HTML and CSS using an external stylesheet.

I created a HTML container with the following:

<header>
    <h1>My Web Space</h1>
    <p> First HTML Page using Sublime Text</p>
</header>

And try to style it using the following (borders are only to help me learn about containers).

header{

    width: 100%;
    height:100%;
    margin: 0 0 0 0;

    background: lightgrey;

    border: solid red;

}

header>h1{
    color:black;
    border: solid blue;
    margin: 0px 0px 0px 0px;
}

header>p{
    font-style: italic;
    text-align: left;
    color:white;
    border: solid yellow;
    margin: 0px 0px 0px 0px;
}

However, when I run it in a web page, the width of the header is not 100% of the browser window. I can still see some slime fraction of the body background (in this case coloured red) on the top, left and right sides).