ハンバーガーメニューのレイアウト崩れの理由を知りたいです

忍者コード　中級14 のハンバーガーメニューのアイコン実装でspanの大きさを変えるとレイアウトがくずれます

ハンバーガーメニューをCSSのみで実装するという前提です。
befor, afterを使用しているものが多い中、このサイトではpositionを利用しており
大枠の大きさを変えたくなったときbefore, after に比べて使い勝手がいいのかなと思いました。
解答コード通りだときれいにハンバーガーメニューが表示されなす。
解答通りはspanのwidthが25px heightが17pxとなってますが
これを例えばwidth: 50px; height: 34px; とすると
ハンバーガーメニューの一番上の棒がspanの一番上になってません。
width: 25px; height:17px ; でもよくみると一番上の棒は一番上にきていないように見えます。
一番上の棒は
span I:nth-child(1) {
top: 0;
}
として一番上に配置されるはずなのにどうしてくずれるのでしょうか？

＊初質問です。質問の仕方が下手くそで申し訳ありません。
4月からプログラミングを勉強し始めた初心者です。
よろしくお願いします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<input type="checkbox" id="hamburger">
2<label for="hamburger">
3  <span>
4    <i></i>
5    <i></i>
6    <i></i>
7  </span>
8</label>

CSS
1input {
2    display: none;
3}
4label {
5    position: relative;
6}
7span {
8    display: inline-block;
9    width: 25px;
10    height: 17px;
11}
12span i {
13    position: absolute;
14    width: 100%;
15    height: 2px;
16    background-color: #000;
17    display: block;
18    transition: all .3s ease-in-out;
19}
20span i:nth-child(1) {
21    top: 0;
22}
23span i:nth-child(2) {
24    margin: auto;
25    top: 0;
26    bottom: 0;
27}
28span i:nth-child(3) {
29    bottom: 0;
30}
31input:checked + label span i:nth-child(1) {
32    margin: auto;
33    transform: rotate(45deg);
34    right: 0;
35    bottom: 0;
36    left: 0;
37    top: 0;
38}
39input:checked + label span i:nth-child(2) {
40    transform: rotateX(90deg);
41    top: 0;
42    bottom: 0;
43}
44input:checked + label span i:nth-child(3) {
45    margin: auto;
46    transform: rotate(-45deg);
47    top: 0;
48    right: 0;
49    bottom: 0;
50}