css - Div がブラウザの幅 100% ではない

Question

私の div はブラウザーの全幅を引き伸ばすことはなく、両端で約 10px 短く停止します。

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

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

私は両方を試しましautoた100%が、それでも同じ結果が得られます。

Answer 1

次の css ルールを追加します。

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

Answer 2

私のプロジェクトの多くに、次のリセット css を追加しています。その後、これ以上の問題はありません =)

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 をコードに追加します。新しい単位 "vw" ビューポート幅を使用して、要素の幅をビュー ポートに設定します。

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

詳細については、次のリンクを参照してください: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/