I'm encountering an issue with the footer on my website. The margin: auto; command doesn't seem to be working for the list items in the footer.
I want the items in the footer to occupy one-third of the width, but no matter where I place the margin: auto command, the links remain side by side.
Below is my HTML:
<footer>
<ul>
<li><a href="text1.html">text1</a></li>
<li><a href="text2.html">text2</a></li>
<li><a href="text3.html">text3</a></li>
</ul>
</footer>
And here is my CSS:
footer{
width: 100%;
margin: 0;
padding: 0;
background-color: darkcyan;
}
footer ul{
margin: 0;
list-style: none;
text-align: center;
}
footer ul li{
display: inline;
}
footer ul li a{
text-decoration: none;
color: black;
margin: auto;
}
Appreciate any assistance you can provide!