Having a small space between the slider image and the navigation bar is causing some issues. I've tried various solutions like minifying the code, adjusting margins, and setting line heights to zero but nothing seems to be working. One question I have is whether I should place the image inside a div - if so, why?
HTML
<!-- Start Header -->
<header class="main-header">
<img src="image/header.jpg" alt="header image">
<nav>
<div class="container">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services & pricing</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
</nav>
</header>
<!-- End Header -->
CSS
/* reset */
*
{
margin: 0;
padding: 0;
font-family: helvetica, sans-serif;
}
.container
{
width: 1000px;
height: auto;
margin: 0 auto;
}
/* end reset */
/* start header */
header img
{
width: 100%;
height: 800px;
}
header nav
{
background-color: #151C24;
width: auto;
height: 30px;
}
header nav ul
{
text-align: center;
text-transform: capitalize;
}
header nav ul li
{
display: inline-block;
padding: 5px;
color: #fff
}
header nav ul li::after
{
content: " |";
}
header nav ul li:last-child::after
{
content: ""
}
header nav ul li a
{
text-decoration: none;
color: #fff
}
header nav ul li a:hover
{
color: #EBEEF5;
font-weight: bold;
}
/* end header */