Why do the browsers render center aligned text differently at different resolutions?

I have a "notification bell" on my website and a number in it (how many notifications you have). That number is in the middle until about 1200px, then it goes slightly to the left (1px). Looking closely with Photoshop, the text becomes 1px smaller. How, and why is this happening?

Tested in Chrome.

EDIT 3: This is just getting weirder. I added display: inline-block after removing float, but it became wrong again. However removing float: left, and removing the menu option this is paired with, brings the issue back. Aww... :(

EDIT 2: it seems I found the cause. This is in the menu for me, and the menu items have float: left. I removed the float left (of course it's a mess now), but the number went exactly to the middle. No idea though why this doesn't happen at lower resolutions.

EDIT: Added screenshot! On the left, it's the smaller resolution, the "0" is in the middle, but on the right with bigger resolution it's 1px to the left. I know it's barely visible, but it annoys me.

Some html:

<span class="open_notifs main notif"><span class="item">0</span></span>

Here's some CSS too:

#cs_menu span {
    position: relative;
    display: inline-block;
    outline: 0;
    color: #FFF;
    text-decoration: none;
    letter-spacing: 1px;
    text-shadow: 0 0 1px rgba(255,255,255,.3);
    font-size: 14px;
    cursor: pointer;
    height: 35px;
    line-height: 35px;
}

#cs_menu span.notif {
    background: url(/images/notif-bell.png) no-repeat;
    padding: 0;
    margin: 0 4px;
}

#cs_menu span.item {
    padding-left: 0;
    padding-right: 0;
    width: 30px;
    text-align: center;
    line-height: initial;
    letter-spacing: 0px;
}