Menu items and social icons do not align correctly - css

Question

I am trying to load a line of social icons and then underneath that a line of menu items.
The alignment is not 100% right-aligned and in IE. Instead, the menu items get shoved all the way over to the left.
The ideal look on all browsers should be :
Code in a bootply
I'm using bootstrap 2.2.2
HTML:
<div class="row-fluid" id="top-header" style="background: #fff url(http://www.inter-active.co.za/images/background-top.jpg) top center;">
<!-- Navigation -->
<div class="sticky-wrapper" id="navigation-sticky-wrapper" style="height: 108px;">
<div class="navbar navbar-fixed-top" id="navigation">
<div class="container no-padding">
<div id="logo">
<img src="images/logo.png">
</div>
<div class="navbar-inner">
<a class="show-menu" data-target=".nav-collapse" data-toggle="collapse">
<span class="show-menu-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="social">
<li class="social"><img alt="" src="http://www.inter-active.co.za/images/twitter.png" ></li>
<li class="social"><img alt="" src="http://www.inter-active.co.za/images/linkedin.png"></li>
<li class="social"><img alt="" src="http://www.inter-active.co.za/images/facebook.png"></li>
</ul>
<br>
<ul class="nav">
<li class="menu"><a class="colapse-menu1" href="#home">Home</a></li>
<li class="menu"><a class="colapse-menu1" href="#sectionA">About Us</a></li>
<li class="menu"><a class="colapse-menu1" href="#solutions">Solutions</a></li>
<li class="menu"><a class="colapse-menu1" href="#news">News</a></li>
<li class="menu"><a class="colapse-menu1" href="#contact-parallax">Careers</a></li>
<li class="menu"><a class="colapse-menu1" href="#contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!--/Navigation -->
</div>
CSS:
#logo {
width:180px;
height:100px;
padding:4px;
position:absolute;
}
#navigation-sticky-wrapper {
height:45px;
}
ul.socials-icons-top li {
width:35px;
height:35px;
display:inline-block
}
ul.socials-icons-top li a {
opacity:0.5;
transition:all 0.3s ease 0s;
-moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s;
-o-transition:all 0.3s ease 0s;
}
ul.socials-icons-top li a:hover {
opacity:1;
}
#navigation-sticky-wrapper {
height:120px;
}
.is-sticky {
background-color:#fff;
width:100%;
height:121px;
background: #fff url(../images/background-top.jpg) top center;
width:100%;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
float:right;
margin-right:20px;
}
.navbar-inner {
box-shadow: none !important;
min-height: 45px;
line-height: 20px !important;
transition: all 0.3s ease-out 0s;
border-bottom: none !important;
padding-left: 10px !important;
padding-right: 10px !important;
background: transparent;
margin-top: 55px;
}
.navbar {
position: relative;
float:right;
padding 0 20px;
width:100%
}
li.social {
width:32px;
height:32px;
display:inline-block;
}
ul.social {
float:right;
margin-right:250px;
margin-bottom:2px;
}
.navbar .nav {
width:960px;
text-align:center;
margin: 0 10px 10px 0;
}
.navbar .nav > li {
float:none;
display:inline-block;
width:auto;
}
.navbar .nav > li.menu {
margin-right:5px;
margin-top:5px;
}
.navbar .nav > li > a {
font-family:'Calibri', 'Arial', sans-serif;
text-transform:uppercase;
font-weight:400;
font-size:14px;
color: #e76f25;
display: block;
transition: all 0.3s ease-out 0s;
line-height: 14px;
text-shadow: none;
height:16px;
padding: 0px;
}
ul.menu>li:last-child a {
border:none;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
background: none;
box-shadow: none;
color: #222222;
height: 100%;
transition: all 0.3s ease-out 0s;
}
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
color: #333;
text-decoration: none;
height: 100%;
transition: all 0.3s ease-out 0s;
}
.navbar .show-menu {
float: right;
width:30px;
margin: 7px 30px 7px 10px;
height: 31px;
padding:2px;
background:url(../images/responsive-menu.png) no-repeat 2px 2px;
background-size:30px 30px;
cursor:pointer;
border-radius:3px;
opacity:0.7;
display:none
}
.navbar .show-menu:hover {
opacity:1;
}

Answer 1

You have added,
a. 250px of right margin for the ul that has the class 'social'.
Figure - 1
b. And 10px of right margin for nav beneath social.
Figure - 2
To align that you need to set the text-align to right add 240px [a - b] of padding-right for nav.
Here is the CSS Code;
.navbar .nav {
margin: 0 10px 10px 0;
padding-right: 240px; /** 250px - 10px **/
text-align: right; /**/
width: 960px;
}
And additionally, there is 5px of right margin for each li in ul has a class of nav. This makes the menu links to be offset to left by 5px.
To fix that you need to add this block of CSS code;
.navbar .nav > li:last-child {
margin-right: 0;
}
Hope this will help. [This is my first Stackoverflow answer ;)]