Bootstrap footer - Links - Social Media Logos - Links - html

Question

I'm working on a footer for my website. I added social media logos from font-awesome and put it in the middle of my footer. When I added the links, the logos weren't in the middle anymore and you cannot see the links on the right side. I'm relatively new to HTML/CSS and I don't know how to fix it. What should I change that it looks like in the 2nd picture?
And how can I change the "px" in the CSS file into "%" that it looks same on every monitor?
Sorry if my English isn't the best, Thanks in advance. :)
What it looks like
What it should look like
My code:
footer {
position: absolute;
bottom: 0;
width: 100%;
position: fixed;
height: 40px;
background-color: #999999;
}
footer ul.footerleft{
margin-left: 150px;
margin-top: 10px;
}
footer ul.footerleft li{
display: inline;
margin-right: 25px;
}
footer a{
color: #222;
}
footer a:hover{
color: #ffffff;
text-decoration: none;
}
.social:hover {
-webkit-transform: scale(1.0);
-webkit-transition-duration: 0.5s;
}
.social {
-webkit-transform: scale(0.8);
color: #222;
}
<!-- footer -->
<footer class="footer">
<nav class="navbar navbar-default navbar-custom">
<div class="container-fluid">
<div class="nav navbar-nav navbar-left">
<ul class="footerleft">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
<div class="text-center center-block">
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
<div class="nav navbar-nav navbar-right">
<ul>
<li>
Link 4
</li>
<li>
Link 5
</li>
<li>
Text
</li>
</ul>
</div>
</div>
</nav>
</footer>

Answer 1

I got it to work by moving the navbar-right div to the top.
<footer class="footer">
<nav class="navbar navbar-default navbar-custom">
<div class="container-fluid">
<div class="nav navbar-nav navbar-right">
<ul class="footerright">
<li>
Link 4
</li>
<li>
Link 5
</li>
<li>
Text
</li>
</ul>
</div>
<div class="nav navbar-nav navbar-left">
<ul class="footerleft">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
<div class="text-center">
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
</div>
</nav>
</footer>
Then added some css for the footerright:
footer ul.footerright{
margin-right: 150px;
margin-top: 10px;
}
footer ul.footerright li{
display: inline;
margin-right: 25px;
}