Rows and columns not aligning properly - html

Question

I am using bootstrap and there are different rows containing 2 columns each.
The problem is that they are not aligning properly.
This is what I want
and this is what I am getting
Please tell me what's wrong here.
I have been trying this for more than an hour and somehow it's not working.
Here's the css for this
.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;
}
.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 {
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%; */
left: 12px;
top: -12px;
box-shadow: -2px 2px 9px;
}
.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;
/* 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; */
}
.pillars {
background-color: rgb(72, 174, 137);
height: 350px;
top: 0;
}
Here's the link to the codepen for this - codepen
I have updated the image to show the error properly.
each row has the image and row on different sides
and thus the rows are not aligning properly as shown in the image.

Answer 1

Try to not change col- divs styles. create other blocks inside them to get what you want. and remember that col- class has paddings.
i would try something like
<div class="row">
<div class="col-lg-6">
<div class="text-left">
<div class="bordered-box">
<img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
</div>
</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>
with style to bordered-box
.bordered-box{
display:inline-block;
border:3px solid #46ab86;;
}
and here's the jsfiddle

Answer 2

You need to make sure you're using the columns correctly, or else you're styling will just override everything. The idea is that you don't need to use much CSS at all, as it's all in the framework.
Important things are that each row, must have it's own container using row as the class. This is what gives it proper structure, and block-ness(!).
Cut down on all your extra styling, as it's not needed. The Bootstrap column classes do this well enough just by themselves.
Below is a pure example of just using Bootstrap to get the rows aligned, and the text set to left or right of the main page.
Example:
<div class="row">
<div class="col-md-6"><p>Your first row text item, left aligned by default.</p></div>
<div class="col-md-6"><img src="your-image-file.jpg" class="img-responsive" alt="dont-forget-your-alt" /></div>
</div>
<div class="row">
<div class="col-md-6"><img src="your-second-image-file.jpg" class="img-responsive" alt="really-dont-forget-your-alt" /></div>
<div class="col-md-6 text-right"><p>Your second row text item, wich needs to be right aligned by adding the class to the p tag.</p></div>
</div>
etc...

Answer 3

do that in css :
.right{ float:right; margin-right:10px;}
and html :
<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 right">
<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>
https://jsfiddle.net/DTcHh/24772/