Bootstrap navbar and footer alignment

Question

Я использую стандартный бутстрап 3 navbar, и я пытаюсь выровнять текст параметров меню на том же горизонтальном уровне, что и текст и картинки в нижнем колонтитуле.

В основном на левой стороне я хочу, чтобы первая буква пункта меню «Главная» была вертикально выровнена с первой буквой нижнего колонтитула, которая является элементом «Импрессум».

С правой стороны я хочу, чтобы изображение нижнего колонтитула было выровнено с последним пунктом меню, которое является контактом.

Любая помощь будет высоко оценена.

вот мой код:

<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><a href="index.html">HOME</a></li> 
    <li><a href="collection.html">COLLECTION</a></li> 
    <li><a href="web-shop.html">ONLINE SHOP</a></li> 
    <li><a href="philosophie.html">ABOUT US</a></li> 
    <li><a href="contact.html">CONTACT</a></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"> 
        <a href="impressum.html"> IMPRESSUM </a> | 
        <a href="info.html"> INFO </a> |      
        <a href="pdf/presse.pdf"> PRESSE </a> </p> 
      </div> 
        <div class="col-lg-1 col-xs-2"> 
        <a href="http://pinterest.com"> <img src="img/pinterest.png" alt="" class="img-responsive"></a> </div> 
        <div class="col-lg-1 col-xs-2"> 
        <a href="http://instagram.com"> <img src="img/instagram.png" alt="" class="img-responsive"></a> </div> 
        <div class="col-lg-1 col-xs-2"> 
        <a href="http://facebook.com"> <img src="img/facebook.png" alt="" class="img-responsive"></a> </div> 

     </div> 
     <!-- /.row --> 
    </div> 

А вот мой 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

Я думаю, вы должны установить CSS в соответствии с расположением, До сих пор я сделал некоторые изменения в вашем css проверить этот код

/* 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);