Positioning span element doesn't change div width

Question

I am creating a navigation bar that will display notifications much in the same way Facebook does (a little red circle with a number in it).

Using a span element to display the number of unread notifications it looks like this:

I then position it like so:

Of course positioning the span element like this leaves the space to the right that I would like to eliminate. How can this be achieved?

I think I could do it using JQuery to set the position of the span element to the same as the position of the bell icon (plus the offset) but there must be an easier way?

My navigation bar just contains anchor tags inside a nav tag. I am not using list elements.

Here is the notification link in my navigation bar:

  <a href="notifications.php"> 
        <i class="icon fa  fa-bell-o fa-lg"></i> <!-- bell icon -->
        <span><?php echo $num_notifications; ?></span> <!-- number -->
  </a>

And the CSS for the span element:

 position: relative;
 left: -14px;
 top: -8px;

Answer 1

You could make the position absolute. This will position it relative to the first parent element that has a position other than static read more here.

Note you may need to apply some sort of positioning to the anchor tags in you haven't already.

Answer 2

Apply a matching negative right margin:

margin-right: -14px;