Bootstrap navbar and footer alignment - footer

Question

I am using a standard bootstrap 3 navbar and I am trying to align the text of the menu options to be on the same horizontal level as the text and the pictures in the footer.
Basically on the left side I want the first letter of the menu item "Home" to be vertically aligned with the first letter of the footer, which is the item "Impressum".
On the right side I want the image of the footer to be aligned to the last item of the menu, which is contact.
Any help would be highly appreciated.
here is my code:
<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>COLLECTION</li>
<li>ONLINE SHOP</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
<hr>
</div><!-- /.container-fluid -->
</nav>
<!-- Footer -->
<div id="footer">
<div class="row">
<hr>
<div class="col-lg-6 col-lg-offset-1 col-xs-6">
IMPRESSUM |
INFO |
PRESSE </p>
</div>
<div class="col-lg-1 col-xs-2">
<img src="img/pinterest.png" alt="" class="img-responsive"> </div>
<div class="col-lg-1 col-xs-2">
<img src="img/instagram.png" alt="" class="img-responsive"> </div>
<div class="col-lg-1 col-xs-2">
<img src="img/facebook.png" alt="" class="img-responsive"> </div>
</div>
<!-- /.row -->
</div>
And here is my CSS:
#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: inline-block;
float: none;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
}
#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
https://jsfiddle.net/DTcHh/9901/

Answer 1

I think you should set your css according to your layout, So far i made some alteration in your css check this code
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width:100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: block;
float: left;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 48px;
width:15px;
}
#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);