首先，这是指向jsfiddle的链接，其中包含我遇到的问题的示例。我想要的是屏幕顶部的横幅，可以完美地填充标题。我没有让CSS与我一起工作的运气。
这是我的代码：
<body>
<header>
<img src="http://rockstartemplate.com/blogheaders/bannerdesign2.jpg" alt="Banner">
<h1>Sample Text<br></h1>
</header>
<main>
Oh boy some sample text
</main>
<footer>
More Sample Text
</footer>
</body>
和：
html, body {
border: 0px;
margin: 0px auto;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
width: 950px;
border: 2px solid black;
box-shadow: 0 9px 18px 9px black;
background-color: white;
}
header {
border-bottom: 3px solid #800000;
padding-top: 1.5em;
padding-bottom: 0em;
padding-left: 2em;
background-color: grey;
}
main {
clear: left;
padding-top: 1.5em;
padding-left: 2em;
padding-right: 2em;
}
footer {
border-top: 2px solid black;
padding: 15px;
}
任何帮助将不胜感激。
最佳答案
从此CSS删除padding-left：
header {
border-bottom: 3px solid #800000;
padding-top: 1.5em;
padding-bottom: 0em;
padding-left: 2em;
background-color: grey;
}
关于html - 图像未触及 body 侧面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43667581/