After creating a responsive footer, I encountered an issue where the text HELP and back icon were not aligning to the left as intended and appeared stuck in the middle. How can I adjust them to move to the left side? Below is the code snippet for reference:
HTML code:
<div id = "footer">
<span id = "logout" class="pull-right">
<span id = "logoutIcon"></span>
<span id = "logoutText">
LOGOUT
</span>
</span>
<span id = "logout1" class="pull-right">
<span id = "logoutIcon1"></span>
<span id = "logoutText1">
HELP
</span>
</span>
</div>
CSS code::
#footer {
background-color: #125e9a;
bottom: 0;
height: 5%;
position: absolute;
width: 100%;
}
#logout1 {
display: block;
height: 100%;
margin-left: 3%;
padding: 2.5%;
width: 30%;
}
#logoutIcon1 {
background-image: url("../JunosImages/mob/back-arrow_normal_tab.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
float: left;
height: 14px;
margin-top: 2%;
width: 10px;
}
#logoutText1 {
color: #fff;
float: left;
font-size: 14px;
font-weight: 600;
margin-left: 7%;
}