how to put the checkbox to the middle ? now the checkbox is skewed?

I am newbie with html css and javascript and here is my problem.

I code a very simple code like this:

the index.html code:

        <div class="search-btn">
        <i class="search-icon ti-search fa fa-search"></i>
        </div>


        <input type="checkbox" name="" id="nav-mobile-input">
        <div class="nav__overlay"></div>

        <!-- navigation for mobile -->
        <ul id="nav__mobile">
            <div class="nav__mobile-close">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
            </div>
            <li><a href="#" class="nav__mobile-link">Home</a></li>
            <li><a href="#band" class="nav__mobile-link">Bane</a></li>
            <li><a href="#tour" class="nav__mobile-link">Tour</a></li>
            <li><a href="#contact" class="nav__mobile-link">Contact</a></li>
        </ul>

in the styles.css, i code to hide the nav__mobile, using transform like this

#nav__mobile {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 320px;
max-width: 100%;
background-color: #fff;
transform: translateX(-100%);
}

so it hided the nav__mobile.

My problem is, when it displayed the checkbox, it is skewed as you can see in this picture.

So, could you please tell me why it happened? And how to solve this problem ? I want the check box to be the middle. Thank you very much for your time.