How can I correctly align these?

Hi,

if you are using Fontawesome it does that correctly
Use fa-ul and fa-li to replace default bullets in unordered lists.
https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

Consider posting your code (HTML and CSS)..

I'm actually having a problem with the text. I need the text to line up neatly under the line above it.

Without seeing your page it is not easy to see the problem.

You can try setting the ul style to

ul {
  list-style-position: outside;
}

Select allOpen in new window

Otherwise please post something we can work with - rather than a screen shot.

it is setup like this:

 <div class="three-box">
            <div class="row">
                <div class="col-md-4">
                    <div class="sp-box">
                        <h3 class="color-txt"><span class="glyphicon glyphicon-play-circle"></span>Heading 1</h3>
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="sp-box">
                        <h3 class="color-txt"><span class="glyphicon glyphicon-play-circle"></span>Heading 1</h3>
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="sp-box">
                        <h3 class="color-txt"><span class="glyphicon glyphicon-play-circle"></span>Heading 1</h3>
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                            <li>Lorem ipsum dolor sit amet, consectetur</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
 
with this css

.three-box {
      background-color: #e2e2e2;
      padding: 20px;
}
.sp-box ul {
  list-style: none;
}

.sp-box ul li:before {
    content: '✓';
    font-weight: bold;
    position: relative;
    right: 13px;
   color: darkseagreen;
}
.sp-box {
      -webkit-box-shadow: 0px 0px 16px -2px rgba(191,191,191,1);
      -moz-box-shadow: 0px 0px 16px -2px rgba(191,191,191,1);
      box-shadow: 0px 0px 16px -2px rgba(191,191,191,1);
      background: #fff;
      padding: 10px 20px;
      line-height: 2.1;
      font-size: 16px;
}

Hi,

try with

content:"\e013";

Select allOpen in new window

instead of content: '✓';

That did it.. I couldnt find it for the life of me! Thank you all!

You are welcome.