Align contents of fixed left aligned div into right - html

Question

I have four fixed div in four corners of my html page.I need to realign the top div from right.About 40 pixels.I tried float,padding-right,right.None of it works for me.Below is my html and CSS code.
.top-bar a{
padding-left:20px;
float:right;
right:50px;
padding-top:7px;
}
.top-bar,.left-bar{
top:0;
left:0;
}
.top-bar i{
text-align:right;
}
.right-bar{
top:0;
right:0;
}
.bottom-bar{
bottom:0;
left:0;
}
.top-bar,.bottom-bar{
width:100%;
height:40px;
background-color: black;
z-index:100;
position:fixed;
}
.left-bar,.right-bar{
height:100%;
width:40px;
background-color: black;
z-index:100;
position:fixed;
}
<div class="left-bar"></div>
<div class="right-bar"></div>
<div class="top-bar">
<div></div>
<img src="images/social-youtube.png" alt="Subscribe Us">
<img src="images/social-link.png" alt="Follow Us">
<img src="images/social-gplus.png" alt="Follow Us">
<img src="images/social-insta.png" alt="Follow Us">
<img src="images/social-pin.png" alt="Follow Us">
<img src="images/social-twitter.png" alt="Follow Us">
<img src="images/social-fb.png" alt="Like Us">
</div>
<div class="bottom-bar">
<center><i class="fa fa-copyright footer">2015 All Rights Reserved Privacy Policy Terms & Conditions</i></center>
</div>
Thanks in Advance

Answer 1

My first guess is that you want 40px of padding to the right of .top-bar.
You can do this by adding the following CSS rule:
.top-bar {
padding-right: 40px;
box-sizing: border-box;
}
The box-sizing property will keep the total width of the block to 100% instead of 100% plus 40px.
Without that, the block would extend to the right and with the padding, it would look like it has no effect.
.top-bar a {
padding-left: 20px;
float: right;
right: 50px;
padding-top: 7px;
}
.top-bar, .left-bar {
top: 0;
left: 0;
}
.top-bar i {
text-align: right;
}
.right-bar {
top: 0;
right: 0;
}
.bottom-bar {
bottom: 0;
left: 0;
}
.top-bar, .bottom-bar {
width: 100%;
height: 40px;
background-color: black;
z-index: 100;
position: fixed;
}
.top-bar {
padding-right: 40px;
box-sizing: border-box;
}
.left-bar, .right-bar {
height: 100%;
width: 40px;
background-color: black;
z-index: 100;
position: fixed;
}
<div class="left-bar"></div>
<div class="right-bar"></div>
<div class="top-bar">
<div></div>
<img src="images/social-youtube.png" alt="Subscribe Us">
<img src="images/social-link.png" alt="Follow Us">
<img src="images/social-gplus.png" alt="Follow Us">
<img src="images/social-insta.png" alt="Follow Us">
<img src="images/social-pin.png" alt="Follow Us">
<img src="images/social-twitter.png" alt="Follow Us">
<img src="images/social-fb.png" alt="Like Us">
</div>
<div class="bottom-bar">
<center><i class="fa fa-copyright footer">2015 All Rights Reserved Privacy Policy
Terms & Conditions</i>
</center>
</div>