How to move links to the right in a footer

I am quite new to this so sorry if this is a simple fix but I've been at it for over an hour and just cannot work it out, All I am trying to do is create a simple footer for my first website and I am struggling to display the Icons and links on the right side of the footer and the

element to the left.

<footer class="footer">
  <p>
    Any feedback would be much appreciated, you can contact me on the following! 
  </p>
  <div class="links">
    <i class="fa fa-envelope" id="icons"></i>
    <a>Email</a>
    <i class="fa fa-github" id="icons"></i>
    <a>Github</a>
    <i class="fa fa-linkedin" id="icons"></i>
    <a>Linkedin</a>
  </div>
</footer>

footer {
  background-color: #444;
  padding: 10px;
  display: flex;
  justify-content: center;
}

#icons{
  padding: 5px;
}

.links {
  float: right;
}

I have tried text-align: right, I've tried floating it. Just unsure where to go next

if you want to display elements on the opposite sides of the container you can use the justify-content: space-between property.

footer {
 background-color: #444;
 padding: 10px;
 display: flex;
 justify-content: space-between;
}