Html 背景图像不显示，文本不按图像排列

我相信这两个都是新手最容易犯的错误，但是我没有足够的经验来修正它们

出于某种原因，一旦我设置了完整容器的背景，背景就在适当的位置，但它显示了文本后面的主体背景，我不希望这样。另一个问题是文本，我不知道如何使它像我的网站计划一样在图像的一侧对齐

以下是问题的图片：

这就是我希望它看起来的样子：

下面是我的完整代码，我还在学习，所以如果有人能带我走过正在发生的变化，那将是非常棒的。另外，如果你发现了不好的练习或错误，请告诉我，这将对我非常有用。多谢各位

@charset“utf-8”；
@导入url(https://fonts.googleapis.com/css?family=Lato:400，700900300300Italic，100100Italic，400italic，700italic，900italic）；
* {
保证金：0；
填充：0；
}
身体，
标题，
文章
导航，
第节，
页脚，
旁白{
显示：块；
字体系列：“Lato”，普通；
字体大小：400；
背景重复：重复；
背景图片：url（“../img/background lighter.png”）；
}
/*班级*/
.包裹{
最大宽度：100%；
最大高度：100%；
宽度：100%；
高度：自动；
保证金：自动；
}
.细胞三重{
宽度：25%；
显示：内联块；
填充：5px20px；
垂直对齐：顶部；
}
.双格{
宽度：40%；
显示：内联块；
填充物：5px10px；
垂直对齐：顶部；
}
.单细胞{
宽度：100%；
显示：内联块；
填充物：5px10px；
垂直对齐：文本顶部；
}
.条款前{
填充：70px 50px 50px 50px；
文本对齐：居中；
}
.文章前图像{
显示：内联块；
填充：70px 0px 20px 0px；
}
.第1条{
显示：内联块；
背景图像：url（“../img/background light.png”）；
}
.单元双冠词{
宽度：40%；
显示：内联块；
填充物：5px10px；
垂直对齐：顶部；
文本对齐：左对齐；
}
.影子{
盒影：0px 1px 1px#000000；
}
.下划线{
边框底部：3px双#8c8b；
垫底：5px；
左缘：30%；
保证金权利：30%；
}
.副标题{
字号：700；
线高：35px；
}
/*导航栏*/
导航{
背景：rgba（0,0,0,0.7）；
宽度：100%；
高度：自动；
位置：固定；
盒影：0px 1px 1px#000000；
}
李娜{
颜色：白色；
文字装饰：无；
字体系列：“Lato”，普通；
字号：18px；
字体大小：400；
线高：50px；
}
李海军{
列表样式类型：无；
左：60%；
保证金权利：10%；
}
导航李a:悬停：未（.active）{
背景色：rgba（0,0,0,0.3）；
字体大小：130%；
-webkit转换：0.5s；
/*狩猎*/
过渡：0.7s；
}
导航激活{
背景色：rgba（0,255,255,0.5）；
}
李阿{
显示：块；
填充：0px 10px；
浮动：左；
文字装饰：无；
垂直对齐：文本顶部；
}
h1{
字体系列：“Lato”，普通；
字体大小：400；
}
/*  */
氢{
字体系列：“Lato”，普通；
字体大小：300；
}

流线型指数

关于
服务
定价
投资组合
联系方式

STREAMLITE专注于数字营销解决方案
我们提供一系列在线营销和广告解决方案。
专业设计
我们只为客户提供响应性最好的网站。通过使用Streamlite，
我们保证为您量身定制一个符合您需求的时尚定制网站。
用户友好
我们确保您的网站易于使用，质量上乘。我们从不忽视可读性和可访问性的重要性。
我们确保内容完全适合您的流量统计。
移动设备
我们正处于您的业务不再固定的时期，因此，我们将现代响应式web开发技术作为标准，以
确保您的公司可以通过手机和平板电脑等设备访问。
响应性网站
Lorem ipsum dolor sit amet，是一位杰出的献身者。他坐在康瓦利斯广场上。
埃尼安·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费。这是猫科动物的一种交通工具。Donec leo nisi，
rhoncus eget faucibus eget，porttitor Vita lorem。非智人虎鲸。
尼索发酵酒厂的库拉比图尔，索利西丁-米-欧，德高望重的托托。苏打麦片。
搜索引擎优化与定位
Lorem ipsum dolor sit amet，是一位杰出的献身者。他坐在康瓦利斯广场上。
埃尼安·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费。这是猫科动物的一种交通工具。Donec leo nisi，
rhoncus eget faucibus eget，porttitor Vita lorem。非智人虎鲸。
尼索发酵酒厂的库拉比图尔，索利西丁-米-欧，德高望重的托托。苏打麦片。
社交媒体广告
Lorem ipsum dolor sit amet，是一位杰出的献身者。他坐在康瓦利斯广场上。
埃尼安·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费利西斯·费。这是猫科动物的一种交通工具。Donec leo nisi，
rhoncus eget faucibus eget，porttitor Vita lorem。
.article1 img{float:left;}

.cell-double-article {
  width: 35%;
  display: inline-block;
  padding: 5px 10px;
  vertical-align: top;
  text-align: left;
  float:left;
}