如何使它在所有浏览器和不同屏幕尺寸上看起来都一样？

Question

I am using owl carousel for sliding the container in my website. The slider works correctly, the issue arises only after minimizing the screen or if i check that on different monitor or on different browser.

Basically, the below code which is not same for all the web applications and screen sizes.

The container size varies with all the browsers and different monitor sizes. Can someone guide me here?

<div class="container" style= "background-color: #DCDCDC;"> 
    <div class="country-name">Countries</div>
    <div class= "owl-carousel own-theme" style="padding-bottom: 15px;">
        <div class="column-about">
            <div class="country-list">Opportunities?</div>
            <div id="MyDIV">
                The range of courses offered at the universities is vast and gives you the opportunity to choose the area<a href="listofcountries.html#anchor-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
        <div class="column-about">
            <div class="country-list">Opportunities?</div>
            <div id="MyDIV">
                rsities in the world with a modern approach to education and a welcoming<a href="listofcountries.html#netherland-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
        <div class="column-about">
            <div class="country-list">Opportunities ?</div>
            <div id="MyDIV">
                Theopular destinations to study higher education, with more than 500,000 students e education degrees and the qualifications are recognised by employers<a href="listofcountries.html#uk-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
        <div class="column-about">
            <div class="country-list">Opportunitie?</div>
            <div id="MyDIV">
                higher education system is one of the best in Europe with a good career opportunities. Students attending a<a href="listofcountries.html#france-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
        <div class="column-about">
            <div class="country-list">Opportunities ?</div>
            <div id="MyDIV">
                Universitee Programs in the world. University i<a href="listofcountries.html#sweden-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
    </div>  
</div>

<script type="text/javascript">
$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    dotsContainer: true,
    nav: true,
    autoplay: true,
    autoplayTimeout: 2000,  
    autoplayHoverPause: true,           
    responsive: {
        0: {
            items: 1
        },
        300: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        },
        1600: {
            items: 5
        }
    }
});

function myFunction() {
    document.getElementById("myDIV").style.MozTextAlignLast = "right"; 
    document.getElementById("myDIV").style.textAlignLast = "right";
}
</script>

Answer 1

Have you defined

<meta name="viewport" content="width=device-width, initial-scale=1.0">

in your head part?