I am having trouble aligning my social media icon with the navbar menu to the right. There seems to be a gap when I try to do it.
The social icon is currently in a separate row, while the navbar is also in a separate row. I just want to align them both to the right.
Unfortunately, using padding-right and pull-right does not seem to be working. Any help would be greatly appreciated. Thank you in advance.
CSS code
.navbar-collapse {
padding-right: 0px;
margin-right: 0px;
}
HTML codes
<div class="row" style="height: 40px;">
<div class="container">
<div class="social pull-right">
<ul>
<li><a href="#"><i class="fa fa-lg fa-phone"></i></a>+65 652 225 25</li>
<li><a href="#"><i class="fa fa-lg fa-weixin"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-envelope-o"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
</ul>
</div>
</div>
</div>
<!--Navigation Menu and Carousel -->
<div class="row" style="background-color: black">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="img">
</a>
</div>
<div class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="blog.html">SERVICES</a></li>
<li><a href="clients.html">WORKS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
<li><a href="https://plus.google.com">Google+</a></li>
<li><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>
</li>
<li class="active"><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</nav>
</div>
</div>