My sticky header does not cover the viewport width

Question

Please I have created a sticky header and every thing goes well except that this header does not cover all the viewport width and skips a little space at the top of the page. I used "margin: 0" but in vain. Thanks!!

<body>
<header> /*nav bar*/
</header>
<div>
/*Some content*/
</div>
<footer>
</footer>
</body>

body{
display: flex;
flex-diection: column;
}

header{
position: sticky;
top: 0;
width: 100%;
margin: 0;
}

score 0 · Accepted Answer · answered Feb 15 '22 at 21:08

0

the body element by default has a margin of 8px. You need to add body{margin:0} to your css

answered Feb 15 '22 at 21:08

markfila

440
2
9

It works with body{margin: 0}. Thanks very much..you saved me – C.LEGRAND Feb 15 '22 at 21:14

My sticky header does not cover the viewport width

1 Answers1