У меня возникают проблемы с выравниванием моих навигационных ссылок с моим логотипом. В настоящее время мой логотип находится в центре моей навигации, а ссылки по какой-то причине отображаются над моим логотипом, а не рядом с ним. на изображении ниже показана моя проблема
Я пытаюсь сделать так, чтобы это выглядело так:
вот мой код заголовка:
<header id="header" role="banner">
<div class="header-inner">
<nav class="navbar">
<div class="container text-xs-center">
<div class="navbar-nav">
<a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a>
<a href="#" class="nav-item-link nav-item nav-link">Our Team</a>
<a href="#" class="nav-item-link nav-item nav-link">Media</a>
<a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a>
<a href="#" class="nav-item-link nav-item nav-link">About Us</a>
<a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a>
<a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a>
</div>
</div>
</nav>
</div>
</header>
и мой css:
a.nav-item{
color:#000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight:bold;
padding:20px;
}
a.nav-item:hover{
color:#000;
}
a.nav-item:hover{
color:#000;
}
.navbar-nav{
display:inline-block;
}
#donate{
background-color: #7ED321;
border-radius: 8px;
padding: 15px;
}
#header{
width:100%;
}
.header-inner{
padding: 18px 0;
width:100%;
}
любая помощь будет оценена!