Html 将背景图像移到顶部[CSS]

我的背景图片和页面顶部之间有空白，我正在努力完成代码学院课程。 这是它的外观，下面是我的代码：

html，正文{
保证金：0；
}
h1，h2，a{
字体系列：“Oswald”，无衬线；
}
}
a:链接{
背景：黑色；
颜色：白色；
文本转换：大写；
}
a:悬停{
背景：金；
颜色：白色；
文本转换：大写；
}
a:主动的{
背景：黑色；
颜色：白色；
文本转换：大写；
}
a:参观了{
背景：黑色；
颜色：白色；
文本转换：大写；
}
p{
字体系列：Helvetica、Arial、无衬线字体；
}
.集装箱{
宽度：940px；
保证金：0自动；
}
/*主要*/
梅因先生{
背景：url（“https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg）无重复中心；
背景尺寸：封面；
高度：600px；
}
.main.容器{
位置：相对位置；
顶部：100px；
}
梅因先生{
高度：600px；
}
.main h1{
字体大小：150px；
}
.main p{
字号：18px；
}
/*支持*/
.支持{
文本对齐：居中；
填充：50px 0 80px；
}
.支持{
浮动：左；
宽度：28%；
填充：10px；
}
.支持h1，
.支持h2{
颜色：#ffa800；
字体大小：20px；
边缘底部：10px；
}
.clearfix{
明确：两者皆有；
}
.支持p{
颜色：#efefef；
边缘底部：20px；
线高：20px；
字体大小：12px；
}
.btn{
背景色：#eee；
颜色：#1c1c；
字号：18px；
填充：8px 30px；
文字装饰：无；
显示：内联块；
}
/*特征*/
.特征{
高度：600px；
}
.功能h1，
.特征h2{
颜色：#fff；
字体大小：40px；
保证金：0；
填充：50px0；
}
/*页脚*/
.页脚{
高度：600px；
}
.页脚h1，
.页脚h2{
颜色：#fff；
字体大小：40px；
利润率：0.20px0；
填充：50px0；
}
.页脚p{
颜色：#fff；
利润率：0.20px0；
字号：18px；
}
@介质（最小宽度：600px）{
.main h1{
字体大小：200px；
}
.支持{
宽度：30%；
}
.支持h2{
字体大小：40px；
}
.支持p{
字体大小：14px；
}
.特征h2{
字体大小：60px；
}
}

移动
养成健康的习惯健身等等

移动
通过追踪跑步、骑乘和步行，变得更加活跃

尝试更改css文件中的以下内容

body {
 margin: -10px;
}

---

这会减少正文顶部的空白。这可能不是实际的修复方法。

这是因为文本周围有边距。 只需添加

margin:0到
h1、h2，如下所示的a
将解决您的问题

h1, h2, a {
  margin:0;
  font-family: 'Oswald', sans-serif;
}

谢谢，这解决了问题。你怎么知道文本的边距在哪里？我只是简单地检查了主要元素，然后在HTML上为所有的孩子们悬停。在Chrome中，边距显示为橙色框，因此很明显这就是问题所在。开发人员工具非常方便，可以帮助解决大多数问题。看看这个，了解更多关于Chrome开发工具的信息。
.main .container {
    position:relative;
    top:100px; // Remove
}

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