Html 图像未正确对齐

我想要达到的目标如下

我得到的是图像和绿色边框之间的差距太大。

我如何使它看起来像上面的图片

这是我的密码笔的链接-

代码如下：

    .container {
  text-align: center;
  width: 80%;
}

.first {
  background: rgb(0, 30, 58);
  color: white;
}

.span1,
.span2 {
  font-size: 36px;
  font-weight: bold;
}

.span1 {
  color: rgb(72, 174, 137);
}

[type="text"] {
  border-radius: 25px;
  padding-left: 5px;
}

[type="submit"] {
  color: white;
  background-color: rgb(72, 174, 137);
  border-radius: 25px;
  position: relative;
  margin-left: -25px;
}

.use {
  height: 85%;
  margin: 0 auto;
}

.box {
  border: 3px solid rgb(72, 174, 137);
  width: 55%;
  margin: 0 auto;
  max-height: 210px;
}

.box .img-responsive {
  margin-top: -20px;
}

.para {
  text-align: left;
  margin-right: 0;
  padding-right: 0;
  padding-top: 15px;
}

.para strong {
  font-weight: 900;
  font-size: 16px;
}

.second {
  margin-bottom: 30px;
  border: 1px solid green;
  width: 10%;
}

.threebox {
  width: 90%;
  margin: 0 auto;
  padding-left: 70px;
}

.col-lg-4 {
  height: 40%;
}

.col-lg-4 > p {
  background-color: white;
  border: 2px solid white;
  border-top-color: green;
  width: 200px;
  height: 160px;
  box-shadow: 10px 10px 15px;
}

.positions {
  margin-top: 60px;
  position: relative;
  margin-bottom: -50px;
  z-index: 2;
}

.positions > h1 {
  font-size: 30px;
  font-weight: bold;
}

.spanf {
  font-size: 18px;
  font-weight: bold;
}

.features {
  text-align: center;
  padding-bottom: 40px;
  width: 100%;
  margin: 0 auto;
  background-color: rgb(242, 243, 245);
  height: 1500px;
  z-index: 1;
  padding-top: 120px;
  margin-bottom: 0;
}

.features .row {
  border: 2px solid red;
  width: 65%;
  margin: 0 auto;
}

.features .row p {
  text-align: left;
  padding-left: 20px;
}

.features button {
  border-radius: 20px;
}

.features .row {
  margin-top: 40px;
}

.features img {
  width: 98%;
  height: 98%;
}

.features .row .col-lg-6 {
  padding-right: 15px;
  padding-left: 2px;
}

.imgright {
  position: relative;
  border: 3px solid rgb(72, 174, 137);
  top: 5%;
  width: 40%;
  padding-bottom: 0px;
  padding-right: 2px;
  padding-left: 0;
  margin-left: 20px;
  margin-top: 20px;
}

.img2 {
  position: relative;
  top: -25px;
  left: -20px;
  padding-bottom: 10px;
}

.imgleft {
  position: relative;
  border: 3px solid rgb(72, 174, 137);
  width: 40%;
  top: 5%;
  margin-left: 10px;
  margin-top: 20px;
}

.img3 {
  position: relative;
  top: -20px;
  padding-bottom: 10px;
  left: 40px;
}

.pillars {
  background-color: rgb(72, 174, 137);
  height: 350px;
  top: 0;
}

这里你已经定义了.img2和.img3类，你的结果受到这些类的影响，只需删除这些类就可以了，检查我的代码片段

.box.img响应{ 利润上限：-20px； }并从这里移除页边空白顶部

.container{
文本对齐：居中；
宽度：80%；
}
.首先{
背景：rgb（0,30,58）；
颜色：白色；
}
.span1，
.span2{
字体大小：36px；
字体大小：粗体；
}
.span1{
颜色：rgb（72174137）；
}
[type=“text”]{
边界半径：25px；
左侧填充：5px；
}
[type=“submit”]{
颜色：白色；
背景色：rgb（72174137）；
边界半径：25px；
位置：相对位置；
左边距：-25px；
}
.使用{
身高：85%；
保证金：0自动；
}
.盒子{
边框：3倍实心rgb（72174137）；
宽度：55%；
保证金：0自动；
最大高度：210像素；
}
.box.img响应{
利润上限：-20px；
}
段落{
文本对齐：左对齐；
右边距：0；
右边填充：0；
填充顶部：15px；
}
帕拉斯特朗先生{
字号：900；
字体大小：16px；
}
.第二{
边缘底部：30px；
边框：1px纯绿色；
宽度：10%；
}
.三盒{
宽度：90%；
保证金：0自动；
左侧填充：70px；
}
.col-lg-4{
身高：40%；
}
.col-lg-4>p{
背景色：白色；
边框：2倍纯白；
边框顶部颜色：绿色；
宽度：200px；
高度：160px；
盒影：10px 10px 15px；
}
.职位{
边缘顶部：60像素；
位置：相对位置；
边缘底部：-50px；
z指数：2；
}
.职位>h1{
字体大小：30px；
字体大小：粗体；
}
斯潘先生{
字号：18px；
字体大小：粗体；
}
.特征{
文本对齐：居中；
填充底部：40px；
宽度：100%；
保证金：0自动；
背景色：rgb（242、243、245）；
高度：1500px；
z指数：1；
填充顶部：120px；
页边距底部：0；
}
.特征.行{
边框：2倍纯红；
宽度：65%；
保证金：0自动；
}
.特色.第p行{
文本对齐：左对齐；
左侧填充：20px；
}
.功能按钮{
边界半径：20px；
}
.特征.行{
边缘顶端：40px；
}
.功能img{
宽度：98%；
身高：98%；
}
.特征.第列col-lg-6{
右侧填充：15px；
左侧填充：2px；
}
.不好{
位置：相对位置；
边框：3倍实心rgb（72174137）；
最高：5%；
宽度：40%；
垫底：0px；
右侧填充：2px；
左侧填充：0；
左边距：20px；
边缘顶部：20px；
}
伊姆格勒夫特先生{
位置：相对位置；
边框：3倍实心rgb（72174137）；
宽度：40%；
最高：5%；
左边距：10px；
边缘顶部：20px；
}
.支柱{
背景色：rgb（72174137）；
高度：350px；
排名：0；
}

转化的

Shopify的第一个商业智能平台

我们向您展示如何增加收入
-您所要做的就是采取行动

立即加入我们的测试版，成为第一个访问Conversific的人

为什么要使用CIF？

Conversific帮助您做出明智的决策，以发展业务

有很多平台可以让您轻松捕获有关电子商务网站的数据和分析。但当涉及到了解您捕获的数据时，并不总是清楚什么是重要的，以及在哪里进行更改

转换是如何工作的？
告别收集报告和分析数据，直接进入决策阶段


Conversific安装到您的电子商务商店，只需从您的shopify商店点击一次即可

安装后，您只需安装google analytics

登录后，您会立即看到全面的报告概述

你会喜欢的功能
无论发生什么，这些都是您将喜爱的功能

那么，这是这一段的结尾还是你要保留的内容
打字直到手指流血

以电子商务为中心
以决策为中心的仪表盘，以增强您的电子商务业务

有很多平台可以让您轻松捕获有关电子商务站点的数据和分析。但当涉及到理解您捕获的数据时。并不总是清楚什么是重要的以及在哪里进行更改。

现在加入

易于理解
优化您的产品和类别
性能

有很多平台可以让您轻松捕获有关电子商务站点的数据和分析。但当涉及到理解您捕获的数据时。并不总是清楚什么是重要的以及在哪里进行更改。

现在加入

增加收入<；br；<；涡轮增压器>；提升您的市场营销，并找到性能最佳的营销渠道>；<；br>
查看哪些营销渠道对您的业务最有效
并使您的投资回报最大化

现在加入

专注于电子商务
以决策为中心的仪表盘，以
推动您的电子商务业务

有很多平台可以让您轻松捕获有关电子商务站点的数据和分析。但当涉及到理解您捕获的数据时。并不总是清楚什么是重要的以及在哪里进行更改。

现在加入

中国的四大支柱
停止在决策过程中浪费时间，增加收入并降低成本

这是更改后的CSS，您的CSS的其余部分将在那里

.features img {
    /*   width: 98%; */
    /*   height: 98%; */
    left: 12px;
    top: -12px;
    box-shadow: -2px 2px 9px;
}

.features .row .col-lg-6 {
    /*   padding-right: 15px; */
    /*   padding-left: 2px; */
}

.img2 {
     position: relative;

     /*   padding-bottom: 10px; */
}

.imgleft {
    position: relative;
    border: 3px solid rgb(72, 174, 137);
    width: 40%;
    top: 5%;
    margin-left: 10px;
    margin-top: 20px;
    padding: 0;
}

.img3 {
    position: relative;
    left:30px;
    /*  top:-20px; */
    /*   padding-bottom: 10px; */

}

---

根据您的代码笔输出删除此项

.box.img responsive{margin top:-20px；}

和from

.img2

和

.img3

删除顶部和左侧样式。你的意思是只删除margin top属性，对吗？我删除了完整的内容，因为这是其中唯一的属性，根本没有任何区别。你删除了所有属性吗，看到最新的评论了吗？好的，我照你说的做了