Navigation does disappear under gallery: How can i fix this?

My navigation disappears under my gallery while scrolling. I did not use any z-height for the pictures and i do not know how i could possibly fix that.

Also at the quote section the blockquote just overlaps with the navigation.

I have tried working with z-height but it did not help - nav still disappears under the pictures.

My whole code doesnt fit in here so please use the jsfiddle for the whole view : https://jsfiddle.net/joxm3tcu/1/

<header>
    <section class="navigation">
        <div class="nav-container">
            <div class="brand">
                <a href="#!">Logo</a>
            </div>
            <nav>
                <div class="nav-mobile">
                    <a id="nav-toggle" href="#!"><span></span></a>
                </div>
                <ul class="nav-list">
                    <li>
                        <a href="#!">MOVE</a>
                        <ul class="nav-dropdown">
                            <li>
                                <a href="#!">Home</a>
                            </li>
                            <li>
                                <a href="#!">Media</a>
                            </li>
                            <li>
                                <a href="#!">Open Space</a>
                            </li>
                            <li>
                                <a href="#!">Vacation</a>
                            </li>
                            <li>
                                <a href="#!">Events</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#!">Über uns</a>
                    </li>
                    <li>
                        <a href="#!">Aktuelles</a>
                    </li>
                    <li>
                        <a href="#!">Kontakt</a>
                    </li>
                </ul>
            </nav>
        </div>
    </section>
    <section class="hero">
        <div class="hero-inner">
            <h1>Ein neues Jugendhaus in Eimsbüttel – Das MOVE</h1>
            <h2>Neueröffnung am 15. Juni 2019</h2>
        </div>
    </section>
</header>
<main>
<section id="Zitat">
    <div id="Zitatbox" style="background:white;">
        <blockquote>
            <p style="color: black;">Die Ausstattung des MOVE ist unschlagbar und die Räumlichkeiten haben mich einfach umgehauen. Ich freue mich darauf, wenn sie von vielen jungen Menschen endlich mit Leben gefüllt werden. - Sven Becker, Medienpädagoge</p>
        </blockquote>
    </div>
</section>
    <section class="ug" style="height: 840px;">

        <ul class="uggalerie">
            <li class="ugbild item1"><a href="#">UG-Beet</a>
                <div>UG-Beet</div>
            </li>
            <li class="ugbild item2"><a href="#">UG-Kinder</a>
                <div>UG-Kinder</div>
            </li>
            <li class="ugbild item3"><a href="#">UG-Kind</a>
                <div>UG-Kind</div>
            </li>
            <li class="ugbild item4"><a href="#">UG-Wohnfläche</a>
                <div>UG-Wohnfläche</div>
            </li>
            <li class="ugbild item5"><a href="#">UG-Behälter</a>
                <div>UG-Behälter</div>
            </li>
            <li class="ugbild item6"><a href="#">UG-Pots</a>
                <div>UG-Pots</div>
            </li>
        </ul>
    </section>