Why are the letters different sizes?

Question

Google Chrome

What am I doing now. I do so

<div class="header__brand">
        <h3>Site.<span>com</span></h3>
</div>

in styles like this

body {    
    font-size: 100%; 
    font-weight: 400;   
}
h3 {
    color: #ff4081;
}
.header__brand h3 span{
    color: #000;
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {    
    .header__brand h3 {
        font-size: 1.7em;
    }
    .header__brand h3 span {
        font-size: 1.7em;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .header__brand h3 {
        font-size: 1.7em;
    }
    .header__brand h3 span{
        font-size: 1.7em;
    }
}

and the text before span and after are different sizes. Why didn't I write that? Sorry for this question.
Example on jsFiddle
Or span takes from parent element like font size?

Answer 1

css shift f5 not loading

Answer 2

I used to have such garbage with VK. Turned off the antivirus - everything loaded normally.

Answer 3

span - 1.7em from h3
h3 - 1.7em from .header__brand
Remove the span size, or specify 1em

Answer 4

In the same place, the same size O_O can remove the span, everything will also be the
effect of the red color?