I want to make sure to adapt the titles of my navbar so that each title is placed perfectly in each allocated position in an image which will be the background of the navbar in CSS.

I would also like the navbar to be responsive for page widths of 900 and 600 px.

Here is the intended result and the result of my code:

[enter image description here](https://i.sstatic.net/f5WDfxd6.png)

Here’s the code I’ve tried so far, but I don’t think it’s the right way:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    
    /* Style de base pour le corps */
    body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f2f2f2;
    }
    
    /* Style pour le conteneur principal */
    #container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    }
    
    #navcontainer {
    display: flex;
    justify-content: center; /* Centrer les éléments horizontalement */
    width: 100%;
    max-width: 70%;
    background-image: url('../images/navbg_b.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 40px;
    }
    #navcontainer a {
    
    margin: 0 10px; /* Espacement horizontal entre les éléments */
    color: #fff;
    text-decoration: none;
    position: relative;
    margin: 0 30px; /* Espacement horizontal entre les éléments */
    }
    #navBg a {
    
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    }
    #navBg a:hover {
    background-color: #555;
    
    }
    /* Style pour la barre latérale */
    #sidebar {
    
    float: right;
    width: 25%;
    background-color: #fff;
    padding: 20px;
    }
    /* Style pour le contenu principal */
    #main {
    
    float: left;
    width: 70%;
    background-color: #fff;
    padding: 20px;
    }
    /* Style pour les en-têtes de section */
    .headertext1 {
    
    font-weight: bold;
    }
    .headertext2 {
    color: #666;
    
    }
    /* Style pour les blocs de texte */
    .textblock {
    
    background-color: #f9f9f9;
    padding: 10px;
    margin-top: 20px;
    }
    /* Style pour le pied de page */
    #footer {
    
    clear: both;
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
    }
    #navcontainer a:nth-child(1) {
    top: -10px;
    

type here

    left : -50 px;
    }
    #navcontainer a:nth-child(2) {
    
    top: -10px;
    
    }
    #navcontainer a:nth-child(3) {
    
    top: -10px;
    
    }
    #navcontainer a:nth-child(4) {
    top: -10px;
    
    }
    #navcontainer a:nth-child(5) {
    top: -10px;
    
    }
    #navcontainer a:nth-child(6) {
    top: -10px;
    
    }