Full width header

Question

我想讓我的標題全寬，但我不知道爲什麼它不起作用，高是完美的，但我不知道寬度有什麼問題， 我將不勝感激如果你能幫助我，這是我所嘗試的：

​​

謝謝。

Answer 1

我已經爲你做了一個演示並更正了你的代碼。 做檢查此鏈接：https://jsfiddle.net/djmayank/qsmpbs9d/

HTML：

<div id= "header"> 

</div> 

CSS：

body { 
    margin: 0; 
} 

#header { 
    background-color: red; 
    height:5px; 
    width:100%; 
-webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    padding-bottom: 9%; 
    background-repeat: no-repeat;} 

希望它能幫助。

Answer 2

很可能您的瀏覽器正在爲您的項目添加默認css，從而爲事物以及其他內容添加填充/邊距。我通常把resets放在我的css文件的頂部，它清除了所有默認的CSS。那人很多用一個流行的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, 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, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}