title: The float left isn't working with a specific icon
body: <p><a href="https://i.stack.imgur.com/rLvgF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rLvgF.png" alt="float left isn't working" /></a></p>
  <p><a href="https://jsfiddle.net/azizul/v7xuw5gb/16/" rel="nofollow noreferrer">JSFiddle</a></p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-6&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;
          &lt;!-- plane icon img --&gt;
          &lt;img src=&quot;https://i.imgur.com/JhOKdVb.png&quot; alt=&quot;plane&quot; class=&quot;card__icon&quot;&gt;
          &lt;div class=&quot;card__body&quot;&gt;
            &lt;h3&gt;Lorem Ipsum&lt;/h3&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    
      &lt;div class=&quot;col-6&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;
          &lt;!-- game-pad icon img --&gt;
          &lt;img src=&quot;https://i.imgur.com/c5O6IOS.png&quot; alt=&quot;plane&quot; class=&quot;card__icon&quot;&gt;
          &lt;div class=&quot;card__body&quot;&gt;
            &lt;h3&gt;Lorem Ipsum&lt;/h3&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&quot;col-6&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;
          &lt;!-- plane icon img --&gt;
          &lt;img src=&quot;https://i.imgur.com/JhOKdVb.png&quot; alt=&quot;plane&quot; class=&quot;card__icon&quot;&gt;
          &lt;div class=&quot;card__body&quot;&gt;
            &lt;h3&gt;Lorem Ipsum&lt;/h3&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .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;
  }
  </code></pre>
  <p>I created the columns using the CSS <strong>float</strong> property. No framework! Everything is working fine but the last column in the row isn't floating left. can anyone explain?</p>
  <p><strong>Interesting Fact:</strong>
  I'm using only two icons called <a href="https://i.imgur.com/JhOKdVb.png" rel="nofollow noreferrer">Plane</a> and <a href="https://i.imgur.com/c5O6IOS.png" rel="nofollow noreferrer">Gamepad</a>. Interestingly when I changed the <a href="https://i.imgur.com/c5O6IOS.png" rel="nofollow noreferrer">Gamepad</a> icon with the '<a href="https://i.imgur.com/JhOKdVb.png" rel="nofollow noreferrer">Plane</a>' icon, it fixes the problem! Still can't figure out why this is happening.</p>