Bootstrap layout doesn't work with safari

I made a website where the layout renders perfectly with any browser but Safari... The cols are not aligned I get images out of their divs. I have no idea why this happen. Did you experience such problems ?

Here is an example of the code (using Bootstrap 4):

        <div class="row" style="margin: 0px; padding: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"
            style="margin: 0px; padding: 0px;">
            <div class="row align-items-center" style="margin: 0px; padding: 0px;">
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 text-center"
                    style="margin: 0px; padding: 0px;"></div>
                <div
                    class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 text-center"
                    style="margin: 0px; padding: 0px;">
                    <titre2>{{sections[section.sections[0]]['name']}}</titre2>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 box empty2"
                    style="margin: 0px; padding: 0px;"></div>
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 boxsup"
                    style="margin: 0px; padding: 0px;">
                    <a
                        href="{{ path('section', {'section_name': sections[section.sections[0]]['name']}) }}">
                        <center>
                            <img class="ownthumbnail1"
                                src="{{ asset(contents[0]|first) | imagine_filter('medium') }}"
                                alt="">
                        </center>
                    </a>
                </div>
            </div>
        </div>


        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"
            style="margin: 0px; padding: 0px;">
            <div class="row align-items-center" style="margin: 0px; padding: 0px;">
                <div
                    class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 text-center"
                    style="margin: 0px; padding: 0px;">
                    <titre2>{{sections[section.sections[1]]['name']}}</titre2>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 text-center"
                    style="margin: 0px; padding: 0px;"></div>
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 boxsup"
                    style="margin: 0px; padding: 0px;">
                    <a
                        href="{{ path('section', {'section_name': sections[section.sections[1]]['name']}) }}">
                        <center>
                            <img class="ownthumbnail2"
                                src="{{ asset(contents[1]|first) | imagine_filter('medium') }}"
                                alt="">
                        </center>
                    </a>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 box empty2"
                    style="margin: 0px; padding: 0px;"></div>
            </div>
        </div>
    </div>