Why my nav-bar hides my texts in a fixed position?

I have a problem with my site, when I put my navigation bar in "fixed" position, the "h1" and the "p" of the section below are hidden by the nav. And i have another problem is that for my grid i would like the photo and text to be in center but it is not working. Can you tell me more please?

enter image description here

.logo {
    width: 200px;
}
.navigation {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
}
.navbar-nav {
    margin: 0 auto;
    width: 100vw;
}

.nav-item .nav-link
{
    color: #1070b4;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase; 
    text-decoration: none;
    border-bottom: 3px solid transparent;
    
}

.nav-link:hover {
    border-bottom: 3px solid #F48F17;
    color: #1d1d1d;
}
.citations {
    background: #1070b4;
}
.citations p {
    margin-top: 20px !important;
}
.citations-grid {
    width: 100%;
    max-width: 1290px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 625px);
    justify-content: center;
    grid-gap: 10px;
}
.paragraphe-citations {
    width: 625px;
    height: 300px;
}
.photo_beat {
    width: 500px;
    height: 400;
    border-radius: 20px;
    box-shadow: 3px 3px 3px black;   
}

<body>
        <section>
            <header class="navigation">
                <div class="container">
                    <nav class="navbar navbar-expand-lg">
                        <!-- Brand -->
                        <a class="navbar-brand" href="#accueil"><img class="logo" src="img/Signature logo.png" alt="Logo"/></a>
                  
                        <!-- Toggler/collapsibe Button -->
                        <button class="navbar-toggler bg-light navbar-light" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                  
                        <!-- Navbar links -->
                        <div class="collapse navbar-collapse" id="collapsibleNavbar">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="#accueil">Accueil</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#sound">Instrumentales</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#projets">Projets</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#about">About</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </header>
        </section>

        <section>
            <div id="accueil" class="citations">
                <h1 class="grand-titre">Pierro a la Prod</h1>
                <p class="titre">Beatmaker et developpeur web</p>
                <div class="citations-grid">
                    <img class="photo_beat" class="paragraphe-citations" src="img/beatmaking1.jpg" alt="Photo Beatmaker"/>
                    <p class="paragraphe-citations">“La musique commence là où s'arrête le pouvoir des mots.” <br> - Richard Wagner <br> <br>“La musique est la langue des émotions.”<br> - Emmanuel Kant <br><br> “La vie sans musique est tout simplement une erreur, une fatigue, un exil.” <br> - Friedrich Nietzsche </p>
                </div>
            </div>  
        </section>

Solution

It happens because fixed property remove element from main flow. You can use margin-top property for citations div.