Кросс-браузерная проблема HTML / CSS

Question

Я работаю над новым сайтом (Wordpress с купленным премиум шаблоном).Разработчик шаблона не смог решить эту проблему, поэтому я надеюсь, что кто-то здесь сможет помочь.

Если вы посмотрите на http://test.one.za.com/wp-test/?page_id=112 внизу страницы в Chrome, 3 контактных элемента не выровнены правильно.Но если вы посмотрите на эту же страницу в IE или Firefox, она выглядит просто отлично.

Я не могу понять, что это такое и как это исправить.

Вот CSS:

Основной контейнер для нижнего колонтитула:

.main-footer {
    position: relative;
    background-color: #303030;
    overflow: hidden;
}

Вот контейнер для «информационной секции»:

.main-footer .footer-info-section {
    position: relative;
    margin-top: -5px;
    background-color: #303030;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-left: 1px solid rgba(255,255,255,0.10);
    border-right: 1px solid rgba(255,255,255,0.10);
}

Наконец, код для div'ов внутри «информационной секции»:

.main-footer .footer-info-section .info-block {
    position: relative;
}

HTML для всего раздела нижнего колонтитула:

<footer class="main-footer">
    <!--Widgets Section-->
    <div class="auto-container">

        <div class="widgets-section">
            <div class="row clearfix">
                <div class="widget_text footer-column col-md-4 col-sm-6 col-xs-12">
                    <div class="widget_text footer-widget widget_custom_html" id="custom_html-2">
                        <h2>Test 1</h2>
                        <div class="textwidget custom-html-widget">sdgsfhdfgg sdfgs dfg sfg fgdgsdfg sdfg sdfg sdf</div>
                    </div>
                </div>
                <div class="footer-column col-md-4 col-sm-6 col-xs-12">
                    <div class="footer-widget widget_categories" id="categories-2">
                        <h2>Test 2</h2>     
                        <ul>
                            <li class="cat-item cat-item-16"><a href="#">Home 2</a></li>
                            <li class="cat-item cat-item-1"><a href="#">Uncategorized</a></li>
                        </ul>
                    </div>
                </div>      
                <div class="footer-column col-md-4 col-sm-6 col-xs-12">
                    <div class="footer-widget widget_recent_entries" id="recent-posts-2">       
                        <h2>Test 3</h2>     
                        <ul>
                            <li><a href="#">1996</a></li>
                            <li><a href="#">Hello world!</a></li>
                        </ul>
                    </div>
                </div>                        
            </div>
        </div>

        <!--Footer Info Section-->
        <div class="footer-info-section">
            <div class="row clearfix">

                <!--Info Block-->
                <div class="info-block col-md-4 col-sm-6 col-xs-12">
                    <div class="inner">
                        <div class="icon fa fa-glass"></div>
                        <h4>Contact 1</h4>
                        <div class="text">Contact 1</div>
                    </div>
                </div>
                <!--Info Block-->
                <div class="info-block col-md-4 col-sm-6 col-xs-12">
                    <div class="inner">
                        <div class="icon fa fa-music"></div>
                        <h4>Contact 2</h4>
                        <div class="text">Contact 2</div>
                    </div>
                </div>
                <!--Info Block-->
                <div class="info-block col-md-4 col-sm-6 col-xs-12">
                    <div class="inner">
                        <div class="icon fa fa-heart"></div>
                        <h4>Contact 3</h4>
                        <div class="text">Contact 3</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--Footer Bottom-->
    <div class="footer-bottom">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="column col-md-6 col-sm-12 col-xs-12">
                    <div class="copyright">
                        ONE Insurance Underwriting Managers (PTY) LTD Reg No. 1996/008987/07 Authorised Financial Services Provider FSP8783 VAT No. 4370160501
                    </div>
                </div>
                <div class="nav-column col-md-6 col-sm-12 col-xs-12">
                    <ul class="footer-nav">
                        <!-- This is just where the foot-nav is located. Redacted this because the links and class names for those links are tediously long and makes this even harder to read -->
                        <li>Footer-nav 1</li>
                        <li>Footer-nav 2</li>
                        <li>Footer-nav 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--End Footer Bottom-->
</footer>

Я прикрепил несколько фрагментов, показывающих, как это отображается в соответствующих браузерах.

Answer 1

добавить ясно: оба кода здесь:

.main-footer .footer-info-section{
 clear:both;
}