Menu element appears at the bottom - html

Question

I am using Bootstrap to show a nav-bar:
As you may see in the screenshot, the first menu element appears at the bottom, not at the same height as the others menu elements.
Here is the CSS and HTMl code:
CSS
<style>
body {
font-family: 'Roboto', serif;
font-size: 16px;
}
#portada {
background-color: #F1F7F8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #4496B0; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #4496B0;
}
.navbar-default {
background-color: #94C3D2;
border-color: #4496B0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 68px;
padding: 7px 15px;
width: 180px;
}
</style>
HTML
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-brand">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="imagenes/logo_pleca.png" alt="Vico">
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li >Inicio</li>
<li class="active">Doctores</li>
<li>Hospitales</li>
<li>Farmacias</li>
<li>Laboratorios</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contactar</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>
I am not able to find a solution for this issue.

Answer 1

Close </a> image
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header navbar-brand">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="imagenes/logo_pleca.png" alt="Vico"></a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li class="active">Doctores</li>
<li>Hospitales</li>
<li>Farmacias</li>
<li>Laboratorios</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contactar</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>

Answer 2

Check this fiddle Fiddle
Few tag missing check HTML code:
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-brand">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="imagenes/logo_pleca.png" alt="Vico"></a>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Inicio</li>
<li>Doctores</li>
<li>Hospitales</li>
<li>Farmacias</li>
<li>Laboratorios</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contactar</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
</div>

Answer 3

Problem is <a class="navbar-brand" href="index.html"><img src="imagenes/logo_pleca.png" alt="Vico"> there is no closing anchor tag which is the reason for improper layout.
It should be
<a class="navbar-brand" href="index.html">
<img src="imagenes/logo_pleca.png" alt="Vico">
</a>
</div>
Demo : https://jsfiddle.net/yn2xeq6z/