Div is not 100% browser width

Question

My div will not stretch the entire width of the browser, it stops at both ends by about 10 pixels.

.header {
  position: relative;
  background-color: #088ed7;
  width: auto;
  height: 20px;
}

<div class="header">...</div>

Run codeHide result

I tried both auto, and 100%, but still get the same result.

Answer 1

Probably page margin and / or addition.

Add

html, body {
  padding: 0;
  margin: 0;
}

.header {
  margin: 0;
}

html,
body {
  padding: 0;
  margin: 0;
}

.header {
  margin: 0;
  position: relative;
  background-color: #088ed7;
  width: auto;
  height: 20px;
}

<div class="header">...</div>

Run codeHide result

Answer 2

For many of my project, I am adding the following reset css. Then more questions =)

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none;
}

Answer 3

css:

body {
    margin:0px;
    padding:0px;
}

Answer 4

css, "vw" .

 html,body{
    margin:0;
    padding:0;
 }
 .header{
    width:100vw;
 }

. : https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/