Menu items and social icons do not align correctly

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"><a href="#"><img alt="" src="http://www.inter-active.co.za/images/twitter.png" ></a></li>
                        <li class="social"><a href="#"><img alt="" src="http://www.inter-active.co.za/images/linkedin.png"></a></li>
                        <li class="social"><a href="#"><img alt="" src="http://www.inter-active.co.za/images/facebook.png"></a></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 ;)]