HTML, Customization Problems in Web Page's Footer Section

The code: (Between footer=""" and """ includes html format code)

footer="""<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
        a:link , a:visited{
        color: blue;
        background-color: transparent;
        text-decoration: underline;
        }
                    
       a:hover,  a:active {
       color: red;
       background-color: transparent;
       text-decoration: underline;
       }
                    
       .footer {
       position: static ;
       left: 0;
       bottom:0;
       width:100%;
       background-color:white ;
       color: black;
       text-align: center;
       }
 </style>
       <div class="header">
       <p><b>Get In Touch With Me</b>
       <a style='display: block; text-align: center;'  href="https://www.linkedin.com" target="_blank"></a></p>
       <a href="https://www.linkedin.com"> 
       <img alt="Qries" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"    
       width=50" height="50"><img alt2="Qries" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
       width=50" height="50">                                                 
       </a>
       </div>
   """
st.markdown(footer,unsafe_allow_html=True)  

Hello, I’m building a web application in Python and HTML with a streamlit structure. I could not move the icons and the text ("Get In Touch With Me") to the middle of the page.
In addition, I could not change the size of the text ("Get In Touch With Me"). Finally, I cannot go to https://www.stackoverflow.com and https://www.linkedin.com separately by clicking on the icons. Could you help me with these problems?

>Solution :

in your styles you set style rules for .footer but in container div you set class attr value equal to header. you can check this code snippet:

<div class="footer">
        <p><b>Get In Touch With Me</b></p>
        <a href="https://stackoverflow.com/"><img src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
                alt="stackoverflow icon" width="60" height="60"></a>
        <a href="https://www.linkedin.com"><img src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
                alt="linkedin icon" width="60" height="60">
        </a>
</div>

<style>
        img {
            max-width: 100%;
        
        }
        a:link,
        a:visited {
            color: blue;
            background-color: transparent;
            text-decoration: underline;
        }

        a:hover,
        a:active {
            color: red;
            background-color: transparent;
            text-decoration: underline;
        }

        .footer {
            position: static;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: white;
            color: black;
            text-align: center;
        }
</style>