Я хочу создать подобную веб-страницу. До сих пор я написал код в html и css, например, но не могу выровнять верх панель навигации над элементами меню навигации?
HTML
<body>
<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:enquiry@domain.com</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">about us</a></li>
<li><a href="#services">services</a></li>
<li><a href="#news">news</a></li>
<li><a href="#request">request a quote</a></li>
<li><a href="#contact">contact us</a></li>
<li><a href="#track">track your item</a></li>
</ul>
</div>
</body>
CSS -------------------- -------------------------------------------------- ---------------------------------
.nav__nav-bar {
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
color: black;
font-weight: bold;
margin-top: -102px;
margin-left: 184px;
}
.nav__nav-bar li {
float: left;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:black;
font-weight:bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background-color: yellow;
}
.top-bar__content{
display:inline-block;
}
.top-header {
border:2px solid black;
background-color: black;
}
.header {
background-color: #fff;
height: 80px;
width: 90%;
}
.logo {
padding: 17px;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}
.top-bar {
border: 2px solid red;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 76%;
margin-left: 280px;
height: 52px;
margin-top: -100px;
}
.top-bar-content{
display:inline;
}
Верхняя навигационная панель не получает выровнял сверху. Я попытался использовать flex, но он не работает должным образом. Также пункты меню не выровнены должным образом. Может ли кто-нибудь помочь мне в этом вопросе?
Codepen