Div 不是浏览器的 100% 宽度

Question

My div will not stretch the full width of the browser, it stops short on both ends by about 10px.

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

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

I've tried both auto and 100% but still get the same outcome.

Answer 1

It's likely the page's margin and/or padding.

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>

Answer 2

To many off my project, I'm adding the following reset css. Then, no more issues =)

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

Add the following css rule:

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

Answer 4

Add the following css in your code, the new unit "vw" viewport width is used to set the width of the element to the view port.

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

For more details please refer the link: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/