<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<!-- plane icon img -->
<img src="https://i.stack.imgur.com/7P0v6.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<!-- game-pad icon img -->
<img src="https://i.stack.imgur.com/WgWTv.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<!-- plane icon img -->
<img src="https://i.stack.imgur.com/7P0v6.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
</div>
</div>
.container{
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.row:before,.row:after{
content: '';
display: block;
clear: both;
display: table;
}
.col-6{
width: 50%;
float: left;
}
.card{
margin-bottom: 50px;
}
img{
max-width: 100%;
height: auto;
}
I created the columns using the CSS float property. No framework! Everything is working fine but the last column in the row isn't floating left. can anyone explain?
Interesting Fact: I'm using only two icons called Plane and Gamepad. Interestingly when I changed the Gamepad icon with the 'Plane' icon, it fixes the problem! Still can't figure out why this is happening.
