Need help navbar notification button - html

Question

i have a problem with my navbar notification button,
the button resize the navbar.
example
here is the code
.badge-notify{
background:red;
position:relative;
top: -20px;
left: -35px;
}
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<button class="btn btn-lg btn-link">
<span class="glyphicon glyphicon-envelope"></span>
</button>
<span class="badge badge-notify">3</span>
</a></li>
i dont know if a css problem or what, the button creates a blank space on navbar.
posibily the problem is

Answer 1

Firstly, buttons inside links are invalid HTML so either use just a link or just a button...not both.
You need to put the second span inside the button (or link) and the position it absolutely.
.btn-link {
position: relative;
}
.badge-notify {
background: red;
position: absolute !important;
top: -15px; /* adjust as required*/
right: 5px; /* adjust as required*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="btn btn-lg btn-link">
<span class="glyphicon glyphicon-envelope"></span>
<span class="badge badge-notify">3</span>
</button>
</li>
</ul>