CSS is not applied on footer angularjs - html

Question

I have been struggling with this for two days now, though it looks very simple.
As you see the footer i created in the picture here:
I have two problems:
I cannot seem to apply any css modifications on the footer inside the text ("Capgemini newcomer application")
I cannot add a line separating the rest of the page from the footer without intercepting the logo or applying a margin between the page content and the footer like shown in the next photo:
HTML code
<ion-footer-bar class="bar">
<img src="img/Imag.png" class="test2" />
<div class="text"> Capgemini Newcomer Application </div>
<img src="img/Test3.png" class="test"/>
</ion-footer>
CSS code
.bar {
position: absolute;
margin-top: 20px;
height: 50px;
border-top: 2px solid #FBC02D;
}
.bar .test {
float: right;
clear: left;
position: fixed;
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
bottom: 20px;
}
.bar .text {
text-align: center;
font-size: 6;
bottom: 2px;
}
EDIT
After doing the modifications mentioned below, i got this:

Answer 1

<ion-footer-bar ng-class="{'bar': true}">...</ion-footer>

Answer 2

There are a couple of issues with your CSS that don't work like you would expect:
.bar {
position: absolute;
margin-top: 20px; /* doesn't do anything for position: absolute */
height: 50px;
border-top: 2px solid #FBC02D; /* <-- this will always add the border outside the footer */
}
.bar .test {
float: right;
clear: left;
position: fixed; /* <-- either you float it, or you position it fixed - both together don't make sense */
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
bottom: 20px; /* <-- "bottom" on a non-positioned element doesn't do anything */
}
.bar .text {
text-align: center;
font-size: 6; /* <-- font size needs a unit like "px" or "pt" */
bottom: 2px; /* same as above, this should probably be margin-bottom instead */
}
Cleaned up, it could look like this:
.bar {
position: absolute;
height: 50px;
}
.bar .test {
position: fixed;
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
margin-bottom: 20px;
}
.bar .text {
text-align: center;
font-size: 6pt;
margin-bottom: 2px;
border-top: 2px solid #FBC02D;
}
This will still overlap the logo with the border, but that's a problem that you need to fix in the logo image.