owl carousel 2 top value (element-style) always 24px

Question

I use owl carousel 2 on different pages. I used the same css and js everywhere. For some reason, when I load my page, the nav-buttons (prev and next) always get the inline-style top-value of 24px. I never declared a top-value of 24px anywhere in my js or CSS..

This is my HTML:

<div class="pdf-gallery">
        <p class="headline">Lorem ipsum dolor sit amet, consectetuer</p>

        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=0">
                        <!-- image=2 als Übergabe an die Bildergalerie in der Lightbox; sorgt dafür, dass das richtige Bild geöffnet wird (beginnt mit 0) -->
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=1">
                        <img src="img/content/content.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=2">
                        <img src="img/content/thumbnail.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=3">
                        <img src="img/content/content.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=4">
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=5">
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
    </div>

And this is how I load the owl-carousel in js:

$j('.pdf-gallery').each(function () {
    var $slider = $j(this),
        opts = {
            responsive: {},
            smartSpeed: 800,
            loop: false,
            nav: true,
            navRewind: false,
            navText: ['', ''],
            onInitialized: function () {
                $slider.find('.owl-dots, .owl-nav').wrapAll('<div class="owl-controls">');
            },
            onResized: function () {
                $slider.find('.download .image').setEqualHeight('auto');
                $slider.find('.download .caption').setEqualHeight('auto');
            }
        };

    //Paging-Container
    $slider.find('> div').wrapAll('<div class="wrapper owl-carousel">');

    //responsive definition
    opts.responsive[0] = {items: 1};
    opts.responsive[mediaqueries.maxMobile] = {items: 2};
    opts.responsive[mediaqueries.softTablet] = {items: 3};
    opts.responsive[890] = {items: 4};
    if ($slider.parents('.wide, #full-width').length) {
        opts.responsive[mediaqueries.maxDesktop] = {items: 6};
    }

    if ($j('html').hasClass('lt-ie9')) {
        opts.responsive = false;
        if ($slider.parents('.wide, #full-width').length) {
            opts.items = 4;
        } else {
            opts.items = 3;
        }
    }

    //init
    $slider.find('.wrapper').owlCarousel(opts);
});

And then I have a css for the prev and next button:

.owl-next,
            .owl-prev {
                color: @darkBlue;
                cursor: pointer;
                font-size: 22px;
                position: absolute;
                text-decoration: none;
                top: 2px; }

So I feel like my buttons should have the value top: 2px. But instead they always get an inline style of top: 24px which overwrites my top: 2px value. Is this an default value which is set somewhere? But why if I use the same code everywhere else?