What is preventing my footer links from being centered?

I’ve tried using

display: flex;
justify-content: center;
align-items: flex-end;

but my links still are not centered nor are they displayed at the bottom. I’m trying to get them to display as a row(which they are), centered, and at the bottom of the page. I’ve tried adding it to the footer class as well as the .footer ol

html code:

<footer class=”footer”>
<ol>
<li><a href=”https://instagram.com”><img class=”instagram-icon” src=”images/instagram-icon.png”></a></li>
<li><a href=”https://twitter.com”><img class=”twitter-icon” src=”images/twitter-icon.png”></a></li>
<li><a href=”https://www.linkedin.com”><img class=”linkedin-icon” src=”images/linkedin-icon.png”></a></li>
<li><a href=”https://github.com”><img class=”github-icon” src=”images/github-icon.png”></a></li>
</ol>
</footer>
</html>

css code:

footer {
text-decoration: none;
font-size: 1em;
display: flex;
flex-direction: row;
align-items: flex-end;
}

.footer ol {
list-style: none;
display: flex;
justify-content: center;
align-items: flex-end;
}

.footer ol li {
margin: 1em;
}

.footer ol li a{
text-decoration: none;
}

.footer ol li a:hover {color: rgb(83, 54, 150);}