Icon Alignment Issue

I don’t think it’s your CSS, it looks like you may have enabled the Checkbox in your widgets that says – "Automatically add paragraphs"….if so, try and disable that checkbox and see if it shows up properly. That checkbox/option adds a <p></p> tag to the code which will throw the code off.

Let me know if that’s it.

You’re missing the one-half div containers. It should look like this –

Oh I see, so you want it to look like this? – http://i.imgur.com/i1OmKjz.png

If so, then you’d need to add a div that wraps around both the left and right content divs so they are cleared from the other divs.

To duplicate the example above, I modified your code by adding the class .clear. Then I added that class to the CSS. Here is the html (first step) –

<h4>Here's why you'll love our Program</h4>

<div class="clear">
<div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>

<div class="right-content"><h3><b>S</b>uper Practical</h3>
<p>Learn how native Chinese speaks in their daily conversations.</p></div>
</div>

<div class="clear">
<div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>

<div class="right-content"><h3><b>I</b>nstant Fluency</h3>
<p>Achieve fluency instantly without the need to learn complicated grammar rules.</p></div>
</div>

<div class="clear">
<div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>

<div class="right-content"><h3><b>M</b>inimalistic Approach</h3>
<p>One sentence at a time, our course is designed to prevent procrastination and burnout.</p></div>
</div>

<div class="clear">
<div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>

<div class="right-content"><h3><b>P</b>erfect Pronunciation</h3>
<p>Learn perfect Chinese pronunciation from a Beijing-born Chinese speaker.</p></div>
</div>

<div class="clear">
<div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>

<div class="right-content"><h3><b>L</b>aser Focus on Conversation</h3>
<p>Designed to achieve fluency in the shortest amount of time ever possible by focusing only on conversational Chinese.</p></div>
</div>

<div class="clear">
<div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>

<div class="right-content"><h3><b>E</b>ngaging Video Lessons</h3>
<p>Learn Chinese with video lessons makes it simple and fun.</p></div>
</div>

And next I added this to the CSS –

.clear {
    clear: both;
}

I also modified the icon’s CSS by removing the padding-top since it would be pushed down too far below the text on the right. You can edit this in your CSS to get the same result –

.left-content .fa, 
.right-content .fa {
    padding: 0px 0 40px;
}

Let me know if that helps.

You’re Welcome!