Bootstrap rows issue

Question

I start my website, a onepage. I have a problem with the second section. I start with the title but it appears at the top of the page instead of after the first section..

here is the HTML :

<div class="container-fluid">
    <section class="row first-slide">
        <div class="title col-sm-12">
            <h1 class="presentation">
                <span class="nathan">Nathan Cheval</span> <span class="separator">|</span> <span class="avignon">Avignon & Montpellier</span>
            </h1>
            <hr class="position-hr">
            <img class="scroll-icon" src="imgs/mouse.png" alt="Go down" width="32" height="32">
        </div>
    </section>
    <section class="row second-slide">
        <div class="title col-sm-12">
            <h1>Portfolio</h1>
        </div>
    </section>
</div>

here is a link to my website : http://nathancheval.fr/dev

Thanks in advance for your help

Answer 1

It's because you have a position: absolute on your first-slide, and there is no position given to the second-slide. Try disabling the position absolute and you'll see the title moves beneath your first slide.