Gostaria de colocar o campo de busca mas encima e ficasse dentro dessa linha preta mão não estou conseguindo.
HTML
<div class="header-fixed2">
<div class="row">
<div class="col-xs-3 col-sm-3" >
<img src="imagens/kalunga.JPG" style="width:180px;" class="imagem_empresa2">
</div>
<div class="col-xs-4 col-sm-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto2"><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-xs-5 col-sm-5">
<div class="dropdown">
<div class="dropbtn">
<c:choose>
<c:when test="${empty param.nome}">
<img src="imagens/pessoa2.png" alt="usuario" class="imagem_usuario"> Entre/Cadastre-se<span class="caret"></span>
</c:when>
<c:otherwise>
<p>${param.nome}</p>
</c:otherwise>
</c:choose>
</div>
<div class="dropdown-content">
<li><a href="#"><i class="fa fa-laptop"></i> Meus Pedidos</a></li>
<li><a href="#"><i class="fa fa-gear"></i> Meus Dados</a></li>
<li><a href="#"><i class="fa fa-group"></i> Fale Conosco</a></li>
<li><a href="Logout"><i class="fa fa-group"></i> Sair</a></li>
<li><a href="#"> Não é Cadastrado?Cadastre-se</a></li>
<li><a href="#"><button type="button" onclick="" class="btn_entrar" >Entrar</button> </a></li>
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div id="carrinho2">
<a href="#"><img src="imagens/carrinho2.png" class="carrinho2">()itens</a>
</div>
</div>
</div>
</div>
</div>
CSS
.header-fixed2{
background-color: white;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
display: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
height: 74px;
display: block;
}
.buscar_produto2{
border: 0px solid;
border-radius: 0px 5px 5px 0px;
color:#C0C0C0;
height: 33px;
width: 40px;
float: left;
background-color:black;
color:#ffffff;
}
.imagem_empresa2{
}
#carrinho2{
margin-top: 20px;
}
#carrinho2 a{
color:black !important;
font-size: 12pt;
margin-bottom: 20px;
}
#carrinho2 a:hover{
color:black !important;
font-size: 12pt;
}