Image not aligning properly - html

Question

What I want to achieve is something like this below
And what I am getting is something where there's too much of a gap between the image and the green border.
how do I make it look like the previous image above.
Here's the link to my codepen - codepen link
Here's the code:
.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;
}

Answer 1

This is the CSS after the changes and rest of your CSS will be there.
.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; */
}

Answer 2

here u already defined .img2 and .img3 classes, your result was effecting by these classes just remove those classes then it works fine, check my snippet
.box .img-responsive {
margin-top: -20px;
} and remove margin-top from here
.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;
}
.imgleft {
position: relative;
border: 3px solid rgb(72, 174, 137);
width: 40%;
top: 5%;
margin-left: 10px;
margin-top: 20px;
}
.pillars {
background-color: rgb(72, 174, 137);
height: 350px;
top: 0;
}
<div class="container">
<div class="first">
<p>CONVERSIFIC</p>
<p><span class="span1">The 1st</span><br>Business Intelligence Platform<br><span class="span2">for Shopify</span></p>
<p>We show you how to grow your revenue<br><span class="span3">-all you have to do is take action</span></p>
<form>
<input type="text" placeholder="enter your email" name="email">
<input type="submit" name="submit" value="Add me to Beta">
</form>
<p>Join our beta today,be the first to get access to Conversific</p>
</div><!--first div ends -->
<div class="use">
<h1>Why use Conversicif?</h1>
<hr class="firsth">
<div class="box row">
<div class="col-lg-6 images">
<img class="img-responsive " src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
<div class="col-lg-6 para">
<p><strong>Conversific helps you make intelligent decisions to grow your business</strong><br>
There are plentfy of platforms that make it easy to capture data and analytics about your ecommerce site.But when it comes to understanding the data you've captured, it's not always clear what's important and where to make changes.</p>
</div>
</div><!--box div ends -->
<div class="positions">
<h1>How does Conversific work?</h1>
<p>Say goodbye to gathering reports and analyzing data and head straight to decision making </p>
<hr class="second">
<div class="threebox row">
<div class="col-lg-4"><p>Conversific is installed onto your ecommerce store with just one click from your shopify store</p></div>
<div class="col-lg-4"><p>After the installation you just need to install google analytics</p></div>
<div class="col-lg-4"><p>Immediately after you have signed in you see a comprehensive reports overview</p></div>
</div><!--threebox row ends -->
</div><!-- positions div ends-->
</div><!--use div ends -->
<div class="features">
<h1> Features you'll love</h1>
<p>These are the features you are going to love no matter what<br>
So, is this the end of the paragraph or what or are you gonna keep<br>
typing till your fingers bleed??</p>
<div class="row">
<div class="col-lg-6">
<p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
<button>Join Now</button></p>
</div>
<div class="col-lg-6 imgright">
<img class="img-responsive img2 " src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
</div><!-- row ends -->
<div class="row">
<div class="col-lg-6 imgleft">
<img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
<div class="col-lg-6"><p>EASY TO UNDERSTAND<br><span class="spanf">Optimize Your Product & Category<br> Performance</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
<button>Join Now</button></p></div>
</div><!-- row ends -->
<div class="row">
<div class="col-lg-6"><p>INCREASE REVENUE<br><span class="spanf">Turbo Boost Your marketing and Find<br> Top Performing Marketing Channels</span><br>
See which marketing channels are the most effective for your business<br>and maximize your return on investment<br>
<button>Join Now</button></p></div>
<div class="col-lg-6 imgright">
<img class="img-responsive img2" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
</div><!-- row ends -->
<div class="row">
<div class="col-lg-6 imgleft">
<img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
<div class="col-lg-6"><p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
<button>Join Now</button></p></div>
</div><!-- row ends -->
</div><!-- features div ends -->
<div class="pillars">
<h1>The 4 pillars of Conversific</h1>
<p>Stop wasting time on your decision making process, increase revenue and reduce costs </p>
<hr>
</div><!-- pillars div ends -->
<div class="team"></div>
<div class="end"></div>
</div><!-- container div ends -->