Você precisa tirar a margem padrão do body
:
body {
background: #f9f9eb;
margin: 0; ← ← ← ← ← ← ← ←
}
Tire também o padding
da <ul>
, que é a classe .navigation
:
.navigation {
list-style: none;
margin: 0;
padding: 0; ← ← ← ← ← ← ← ←
background: #0b5eec;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: center;
}
A div
que segura a sua caixa de busca está fora do nav
:
<nav>
...
</nav>
<div class="search-box">
...
</div>
Coloque no final do nav
e insira no CSS os estilos para centralizar e dar uma margem superior do menu:
.search-box{
text-align: center;
margin-top: 15px;
}
Como fica:
body {
background: #f9f9eb;
margin: 0;
}
nav{
background: #0b5eec;
}
.navigation {
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: center;
}
.search-box{
margin: 15px 15px 0;
}
.navigation a {
text-decoration: none;
display: block;
padding: 15px;
color: white;
}
.navigation a:hover {
background: #000;
text-decoration: underline;
}
<header>
<nav>
<ul class="navigation">
<li>
<div class="search-box">
<label>
<input name="search-box" value="Search..."/>
</label>
</div>
</li>
<li><a href="#">Index</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>