I've been experimenting with different methods but I can't seem to change the color, there must be something I'm missing!
How can I update the text color for all the lower links in the footer section?
Here is my HTML code:
<!-- Footer -->
<footer id="footer">
<div class="inner">
<p class="copyright">© MY SITE - 2017 All Rights Reserved.</p>
<ul class="menu">
<li><a href="terms.html">Terms<span> of Use</span></a></li>
<li><a href="privacy.html">Privacy<span> Policy</span></a></li>
<li><a href="#">Downloads<span></span></a></li>
</ul>
</footer>
This is my CSS code:
#footer {
padding: 5em 0 3em 0 ;
background-color: #fff;
text-align: center;
}
#footer > .inner {
margin: 0 auto;
max-width: calc(100% - 4em);
width: 60em;
}
#footer .copyright {
color: #000;
font-size: 0.8em;
}
#footer .menu {
color: #000;
font-size: 0.7em;
}
ul.menu {
padding: 0;
list-style: none;
}
ul.menu li {
padding: 0;
display: inline-block;
margin-left: 0.75em;
padding-left: 0.75em;
border-left: solid 1px;
line-height: 1em;
}
ul.menu li:first-child {
margin-left: 0;
padding-left: 0;
border-left: 0;
}