anchor tag overflow

Hello experts,

I don't know why the anchor tag has the wrong width and height properties. The main element .notificationsBarNav is display flex, but on other similar "tabs" I use floating and the anchor tag is still wrong size when use with *google font icon* and some *span* text.

When I try to change the width and height  in the chromeDevTools, it doesn't react on it.

http://tinypic.com/r/15i6wwi/8

Here's the css:

.notificationsBarNav {
    height: 33px;
    padding: 0 5px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div, a {
      height: 33px;
    }

    a,i, span {
      color: #fff;
    }

    .material-icons {
      font-size: 28px;
      line-height: 33px;
    }
  }

Select allOpen in new window