Problem with my footer that doesn't want to take bottom page length-CodePudding

I have a problem with my footer. My footer is centered and doesn't take all the bottom page length. here's the result I'd like to get : The result expected. It needs to take all the bottom length.

here's my codepen to see the problem : https://codepen.io/Softee/pen/RwLaJye

Here's my code :

html {
  scroll-behavior: smooth;
}

body {
    font-family: Arial,sans-serif;
    background: #e5e5e5;
    margin: 0;
}

/* <!-- NAVBAR --> */

.navbar-toggler{
    background-color: #e5e5e5;
    border:none;
}

.navbar-brand img {
    margin-top: -10px;
    max-height: 100px;
    margin-left: 100px;
}
.navbar-nav li{
  padding-left: 15px;
  padding-right: 10px;
}

.navbar-nav {
    margin-left: auto;
    margin-right: 80px;
    margin-bottom: 2px;
    margin-top: 15px;
    font-size: 18spx;
}

.bg-light {
    background: #583760!important;
}

.nav-link {
    font-size: 15px;
    color: #e5e5e5!important;
}

/* <!-- CAROUSEL --> */

.carousel-text h1{
    font-size: 22px;
    font-weight: bold;
    margin-top: 165px;
    text-align: center;
}
.carousel {
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
    max-width: 55%;
    margin: auto;
}

.carousel-inner {
    border-radius: 20px;
    margin-top: 20px;
}

/* <!-- ACTUALITÉ --> */

section {
    margin-top: 35px;
    padding: 24px;
    box-sizing: border-box;
}

h3 {
    margin-top: 80px;
    margin-left: 200px;
    font-weight: bold;
    font-size: 22px;
}

.flex-container {
    display: flex;
    flex-direction: column;  
    align-content: flex-start;
    height: 100%;
    padding: 10%;
    padding-top: 20px;
}

.flex-container > div{
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    padding: 8px;

}

.articleactu img {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
    float: left;
    border-radius: 15px;
    width: 210px;
}

#desc, #titre, #date {
    word-wrap: break-word;
    max-width: 900px;
    padding-left: 200px;
}

#titre {
    font-weight: bold;
}

#date {
    font-size: 14px;
    font-weight: bold;
    color: #662189;
}

hr.solid {
    color: #3F2189;
    padding-left: 350px;
    width: 60%;
    opacity: 12%;
} 

div #desc, #titre, #date {
    margin-left: 35px;
}

/* <!-- GUIDES ASTUCES --> */

.item{
    margin-left: 25px;
    width:200px;
    text-align:center;
    display:block;
    background-color: transparent;
    border: 1px solid transparent;
    margin-right: 10px;
    margin-bottom: 10px;
    float:left;
    height: 300px;
}

h2 {
    margin-right: ;
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}

img {
    border-radius: 15px;
}

#description {
    position: relative;
    top: 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

#gallerie{
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 65%;
}

/* <!-- ACCORDÉON --> */

.container {
    margin-top: 0px!important;
    background: transparent;
    font-family: sans-serif;
    display: flex;
    justify-content: space-around;
    align-items: center;
    display: flex;
    transform: skew(5deg);
}

.container h4 {
    transform: skew(-5deg);
    font-weight: bold;
    font-size: 22px;
    position:absolute;
    top:-30px;
}

.container .card {
    margin-top: 20px;
    border: none;
    margin-right: 15px;
    background: transparent;
    flex: 1;
    transition: all 1s ease-in-out;
    height: 60vmin;
    position: relative;
}

.container .card .card__head {
    border-radius: 15px;
    color: #e5e5e5;
    background: #613B6A;
    padding: 0.5em;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    transition: all 0.5s ease-in-out;
    min-width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1em;
    white-space: nowrap;
}

.container .card:hover {
    flex-grow: 10;
}

.container .card:hover img {
    filter: grayscale(0);
}

.container .card:hover .card__head {
    text-align: center;
    top: calc(100% - 2em);
    color: #e5e5e5;
    background: rgba(0, 0, 0, 0.5);
    font-size: 2em;
    transform: rotate(0deg) skew(-5deg);
}

.container .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s ease-in-out;
    filter: grayscale(100%);
}

.container .card:not(:nth-child(5)) {
    background: transparent;
    margin-right: 1em;
}

footer {
    color: #e5e5e5;
    margin: 0;
    padding: 10px;
    background: #613B6A;
}

div .Question {
    font-size: 18px;
    text-align: right;
}
    div .Question a {
        font-size: 14px;
        margin-right: 10px;
        color: #e5e5e5;
    }

div .Logo img{
    float: left;
    max-width: 100%;
    min-width: 18%;
    box-shadow: none;
}

div .Copyright {
    font-size: 13px;
    text-align: center;
}

<div id="actualite">
  <section></section>
      <h3> L'ACTUALITÉ </h3>
    <article >
  <div >
    <div>
        <img src="images/gtaarticle.jpeg" alt="Article GTA " >
        <p id="titre">GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus !</p>
        <p id="desc"> Les joueurs attendaient une refonte complète de la trilogie afin de rappeler de lointains souvenirs mais malheureusement les fans sont déçus...</p>
        <p id="date"> Publié le 27 novembre 2021 </p>
    </div>

<hr >

    <div>
      <img src="images/bf2042-2.jpg" alt="Article GTA " >
        <p id="titre">BATTLEFIELD 2042 : De très mauvaise notes pour le nouvel opus.</p>
        <p id="desc"> Le lancement du jeu est malheureusement un raté... Un jeu rempli de bugs, on repense évidemment à Cyberpunk 2077...</p>
        <p id="date"> Publié le 26 novembre 2021 </p>
    </div>

<hr >

    <div>
      <img src="images/farcry.jpg" alt="Article GTA " >
        <p id="titre">FAR CRY 6 : Un lancement réussi selon les statistiques !</p>
        <p id="desc"> La suite tant attendue de Far Cry 5 est là et propose un lancement très réussi. Une beauté graphique à couper le souffle...</p>
        <p id="date"> Publié le 26 novembre 2021 </p>
    </div>

<hr >    

    <div>
      <img src="images/vanguard.jpeg" alt="Article GTA " >
        <p id="titre">CALL OF DUTY : VANGUARD : Est-il bon ?</p>
        <p id="desc"> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
        <p id="date"> Publié le 25 novembre 2021 </p>
    </div>

<hr >

    <div>
      <img src="images/marvel.jpg" alt="Article GTA " >
        <p id="titre">MARVEL AVENGERS : le personnage de Spider-Man bientôt dans le jeu.</p>
        <p id="desc"> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
        <p id="date"> Publié le 25 novembre 2021 </p>
    </div>
    <hr >

    
<!-- PROCHAINEMENT -->

<div id="prochainement"><div>
<div >
    <h4>PROCHAINEMENT</h4>

  <div >
    <img src="images/halo.jpg">
    <div >Halo Infinite</div>
  </div>

  <div >
    <img src="images/god.jpg">
    <div >God of War: Ragnarök</div>
  </div>

  <div >
    <img src="images/gt7.jpg">
    <div >Gran Turismo 7</div>
  </div>

  <div >
    <img src="images/sr.jpg">
    <div >Saints Row</div>
  </div>

  <div >
    <img src="images/arceus.jpg">
    <div >Légendes Pokémon : Arceus</div>
  </div>
</div>

<!-- Footer -->
<br><br>
<footer> 

  <div >
    <img src="https://i.postimg.cc/Bn1t4Nc9/Game-Star-Blanc.png">
  </div>
  <br>

  <div >
    <p>Une question ?<br> <a href="">Contactez-nous!</a>
    </p>
  </div>
<br>

  <div >© 2021 Copyright: GameStar - La Star des références gaming.</div>

</footer>

Thanks for your help in advance!

CodePudding user response：

Some closing tags are missing in your html. For example, article is not closed. This is the reason why your footer inherits the width. As soon as you close it "before the footer" you will notice it. Also the div container with the class flex-container. Or the div with the id actualite will not be closed. Check this and it should work.