How to move social media icons and align to the right site of the page


can someone please help
am trying to move the social media icons to the right side of the page

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        /* Add this CSS to move social media icons to the right */
        .footer-bottom { text-align: right; }
        .footer-text { display: flex; justify-content: flex-end; align-items: center; }
        .footer-text a { margin-right: 40px; }
    </style>
    
    
       <div class="row footer-bottom">
        <p class="col-lg-8 col-sm-8 footer-text m-0 d-flex justify-content-center align-items-center">
            <a href="https://www.facebook.com/profile.php?id=100085875504504" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a>
            <a href="https://twitter.com/itholelomzansi?s=20" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a>
            <a href="https://instagram.com/itholelomzansi_foundation?utm_source=qr&igshid=MzNlNGNkZWQ4Mg==" target="_blank" title="Instagram"><i class="fa fa-instagram"></i></a>
            <a href="https://www.linkedin.com/in/thembekani-khumalo-65109373?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" target="_blank" title="LinkedIn"><i class="fa fa-linkedin"></i></a>
        </p>
</body>
</html>
             </div>
        <div class="border_line">
            <center>
                Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | Designed by Itholelomzansi Group
              </center>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

You need to validate your HTML.


You can try replacing justify-content-center with justify-content-end, you may need to add that to the div container as well.

<div class="row footer-bottom justify-content-end">
  <p class="col-lg-8 col-sm-8 footer-text m-0 d-flex justify-content-end align-items-center">