I can't enlarge my footer to take all the space-CodePudding

I'm trying to enlarge my footer so it can take the all page and stick to the bottom (not following when scrolling), but I have no idea how to do it... here's the result I have on my website : my result

Here's my code : https://codepen.io/Softee/pen/RwLaJye

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{
    max-width: 100%;
    min-width: 18%;
    box-shadow: none;
}

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

<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 in advance for your help!

CodePudding user response：

This should do the trick.

footer {
        color: #e5e5e5;
        margin: 0;
        padding: 10px;
        background: #613B6A;
        width: 100vw;
        position: absolute;
        bottom: 0px;
    }

CodePudding user response：

Just add:

body {
   margin: 0;
}

See here:

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{
    max-width: 100%;
    min-width: 18%;
    box-shadow: none;
}

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

body {
  margin: 0;
}

<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>

CodePudding user response：

You made your logo size to be 100% of your footer, you need to resize the logo smaller and float it left, then clearing the float to show the centered the text.