HTML: Footer width issue

my webpage is totally fine, I just have one problem: My webpage contains a "footer", but I want to show it every time in a small bar at the bottom of my page (not just if I scroll down to the end of my page). I set a z-index to 1 (so its in front of all the other stuff) and also gave it a background color. But for some reason it is just in the bottom left hand corner and very small, I tried to put the width to 100%, but for some reason that didn't change something. here my html code:

.footer-links{
  z-index: 1; 
}

.footer-links ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none; 
  position: fixed;
  bottom: 0;
}

.footer-links ul li a{
  width: 100%;
  padding: 0;
  color: white;
  text-decoration: none; 
  font-size: 14px;
  background-color: black;
}

 <!-- Footer -->
<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>

Solution

You need to set the width and the background-colorin the .footer-links ul and set the left boundary on .footer-links

.footer-links{
  width: 100%;
  position: absolute;
  background-color: black;
  bottom: 0px;
  left:0;
}

.footer-links ul{
  width: 100%;
  background-color: black;
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none; 
  position: fixed;
  bottom: 0;
}

.footer-links ul li a{
  padding: 0;
  color: white;
  text-decoration: none; 
  font-size: 14px;
  background-color: black;
}

<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>