Probleme de fusion Html

Donc voila je fais un petit site pour m'entrainer un peu, j ai fait deux code dystinct, un code separer pour le header, et un autre pour le footer. Les deux codes marche separement masi quand je l ai fusionne le header est mal afficher, pourtant les class ne sont pas les meme.

je vous met les deux code dystinct :

Header

html:

<header>
        <nav>
            <div class="logo">
                <a href="/home/index.html">Rachel Creations</a>
            </div>
            <div id="menu-toggle" class="menu-icon">&#9776;</div>
            <ul class="nav-links">
                <li><a href="/home/index.html">Accueil</a></li>
                <li><a href="#">Produits</a></li>
                <li><a href="#">À propos</a></li>
                <li><a href="#">Panier</a></li>
            </ul>
        </nav>
    </header>
    (je ne vous ai pas mis le script pour ouvrir le menu)

header {
background-color: var(--main-color);
padding: 20px;
position: relative;
z-index: 1;

}

nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo a {
font-size: 24px;
font-weight: bold;
color: var(--text-color);
text-decoration: none;
}

.menu-icon {
font-size: 24px;
color: var(--text-color);
cursor: pointer;
display: none;
z-index: 9999;

}

.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

.nav-links li {
margin-left: 20px;
}

.nav-links a {
text-decoration: none;
color: var(--text-color);
}

.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--overlay-color);
backdrop-filter: blur(5px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 999;
}

.menu-active .menu-overlay {
opacity: 1;
pointer-events: auto;
}

.menu-active .nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
}

.menu-active .nav-links li {
margin: 15px 0;
}

.menu-active .nav-links a {
color: var(--text-color);
}

font-size: 24px;
color: var(--text-color);
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;

}

  ET VOICI MON CODE Footer (ce n'est pas moi qui l ai fait) :

 ```<footer>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-sm-4 col-md-3 item">
                        <h3>Navigation</h3>
                        <ul>
                            <li><a href="#">Accueil</a></li>
                            <li><a href="#">Produits</a></li>
                            <li><a href="#">Panier</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4 col-md-3 item">
                        <h3>Contact</h3>
                        <ul>
                            <li><a href="#">06 00 00 00 00</a></li>
                            <li><a href="#">xxxxx@gmail.com</a></li>
                            <li><a href="#">Page Contact</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4 col-md-3 item">
                        <h3>Nos Politiques</h3>
                        <ul>
                            <li><a href="#">Politiques de confidentialité</a></li>
                            <li><a href="#">Politique de livraison</a></li>
                            <li><a href="#">Politique de retour</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-3 item social">
                    <a href="#"><i class="icon ion-social-facebook"></i></a>
                    <a href="#"><i class="icon ion-social-pinterest"></i></a>
                    <a href="#"><i class="icon ion-social-twitter"></i></a>
                    <a href="#"><i class="icon ion-social-instagram"></i></a>
                        <p class="copyright">Rachel Créations © 2023</p>
                    </div>
                </div>
            </div>
        </footer>``

  .footer-clean {
    padding:50px 0;
    background-color: var(--main-color);
    color:#4b4c4d;
  }

  .footer-clean h3 {
    margin-top:0;
    margin-bottom:12px;
    font-weight:bold;
    font-size:16px;
  }

  .footer-clean ul {
    padding:0;
    list-style:none;
    line-height:1.6;
    font-size:14px;
    margin-bottom:0;
  }

  .footer-clean ul a {
    color:inherit;
    text-decoration:none;
    opacity:0.8;
  }

  .footer-clean ul a:hover {
    opacity:1;
  }

  .footer-clean .item.social {
    text-align:right;
  }

  @media (max-width:767px) {
    .footer-clean .item {
      text-align:center;
      padding-bottom:20px;
    }
  }

  @media (max-width: 768px) {
    .footer-clean .item.social {
      text-align:center;
    }
  }

  .footer-clean .item.social > a {
    font-size:24px;
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    text-align:center;
    border-radius:50%;
    border:1px solid #ccc;
    margin-left:10px;
    margin-top:22px;
    color:inherit;
    opacity:0.75;
  }

  .footer-clean .item.social > a:hover {
    opacity:0.9;
  }

  @media (max-width:991px) {
    .footer-clean .item.social > a {
      margin-top:40px;
    }
  }

  @media (max-width:767px) {
    .footer-clean .item.social > a {
      margin-top:10px;
    }
  }

  .footer-clean .copyright {
    margin-top:14px;
    margin-bottom:0;
    font-size:13px;
    opacity:0.6;
  }

Donc voila j ai essaye de siplifier au maximun , j'aimerai donc fusionner les deux code pour que cela marche mais quand je l ai fusionne mon header s affiche mal en gros la class nav links se met en dessous de la class logo au lieu d etre sur la meme ligne et en justify content normalement

Merci de m'aidé ;)

Ne faite pas de remarque sur le grand nombre de fautes d'orthographe svp