html - Need help navbar notification button -

i have problem navbar notification button, button resize navbar.

example

here 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 css problem or what, button creates blank space on navbar.

posibily problem

firstly, buttons inside links invalid html either use link or button...not both.

you need put second span inside button (or link) , position absolutely.

.btn-link {    position: relative;  }    .badge-notify {    background: red;    position: absolute !important;    top: -15px; /* adjust required*/    right: 5px; /* adjust 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>