How to correctly align fixed header fully to top and left in CSS

Tags: html,css,header,alignment

Problem :

So I have come across a problem when I tried aligning my header design fully to the top margin and the left margin. The use HTML and CSS to perform this. CSS code:

div#headerbox
{
background-color: #a56868;
width:100%;
height: 40px;
position: fixed;
display: block;
margin-top: 0px;
margin-left: 0px;
}

div#headerwrap
{
background-color: #a56868;
width:100%;
height: 40px;
position: fixed;
display: block;
}

HTML code:

<div id="headerbox">
    <div id="headerwrap">
        <p>TEST 123</p>
    </div>
</div>

Why doesnt this code align properly to the edges on both sides as I have put the lenght of the element to be 100%? and how can I fix this?

---

Solution :

Set the padding and margin of HTML body in CSS to zero.

body {
   margin: 0;
   padding: 0;
}