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

HTML-CSS
1

image
image1746×589 145 KB

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>
2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

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">
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.