Bootstrap list items overlap

Can someone please tell me why my second list item is overlapping the first in this code (page can be viewed here:

            <div class="list-group">
                <div  class="list-group-item list-group-item-success">
                    <h4 class="h4">Announcer's Portal</h4>
                    <div class="col-xs-1">
                        <img src="/graphics/announcer.jpg" alt="Announcers Portal" class="img-responsive">
                    </div>
                    <div class="col-xs-11">
                        Tell your announcer who is approaching the finish line, which race they are competing in, their age, gender, and where they 
                        are from.  A nice addition to races that are looking to tap in to the social and personal side of fitness events.  Renders
                        very well on an iPad (not included).
                        <br>
                        <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                    </div>
                </div>
                <div  class="list-group-item list-group-item-warning">
                    <h4 class="h4">Announcer</h4>
                    <p class="mb-1">
                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </p>
                    <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                    </div>
                <div  class="list-group-item list-group-item-danger">
                    <h4 class="h4">Finish Line Truss</h4>
                    <p class="mb-1">
                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </p>
                    <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                </div>
                <div  class="list-group-item list-group-item-info">
                    <h4 class="h4">Finish Line Pix Sponsorship</h4>
                    <p class="mb-1">
                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </p>
                    <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                </div>
                <div  class="list-group-item list-group-item-success">
                    <h4 class="h4">Featured Event</h4>
                    <p class="mb-1">
                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </p>
                    <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                </div>
            </div>

Select allOpen in new window