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

Question

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

In the styles.css, I code to hide the nav__mobile, using transform like this:

#nav__mobile {
  ... 
  transform: translateX(-100%);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: Arial, Helvetica, sans-serif;
}

.clear {
  clear: both;
}

.text-white {
  color: #fff !important;
}

.row {
  margin-left: -8px;
  margin-right: -8px;
}


/*the gia*/

.row::after {
  content: "";
  display: block;
  clear: both;
}

#main {}

#header {
  height: 46px;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#nav {
  display: inline-block;
}

#nav>li {
  display: inline-block;
}

#nav li {
  position: relative;
}

#nav>li>a {
  color: #fff;
  text-transform: uppercase;
}

#nav li a {
  text-decoration: none;
  line-height: 46px;
  padding: 0 24px;
  display: block;
}

#nav .subnav li:hover a,
#nav>li:hover>a {
  color: #000;
  background-color: #ccc;
}

#nav,
.subnav {
  list-style-type: none;
}

#nav li:hover .subnav {
  display: block;
}

#nav .subnav {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  min-width: 160px;
  top: 100%;
  left: 0;
}

#nav .subnav a {
  color: #000;
  padding: 0 16px;
}

#nav .nav-arrow-down {
  font-size: 16px;
}

#header .search-btn {
  float: right;
  padding: 12px 24px;
  position: absolute;
  top: 0;
  right: 12px;
}

#header .search-icon {
  color: #0fade9;
  font-size: 16px;
}

#header .search-btn:hover {
  background-color: #f44336;
  cursor: pointer;
}


/* mobile nav */

.nav_bars-btn {
  width: 28px;
  height: 28px;
  color: #fff;
  margin-left: 8px;
  margin-top: 4px;
  display: inline-block;
  display: none;
}

@media (max-width: 1023px) {
  .nav_bars-btn {
    display: inline-block;
  }
  #nav {
    display: none;
  }
}

.nav__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

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

.nav__mobile-close {
  width: 28px;
  height: 28px;
  color: #666;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.nav__mobile-link {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 8px 0;
  font-size: 1.4rem;
}

.nav__input~h1 {
  color: red;
}

<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>

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.

Answer 1

It is recommended to use display:none when hiding a div.

To hide a div only in mobile views, you can use media query.

https://getbootstrap.com/docs/4.0/layout/overview/

If you want to set the checkbox to the middle, maybe the concept of flexbox will help you.

It will be something like this.

<div style="width:100vw;display:flex;justify-content: center;">
    <input type="checkbox" name="" id="nav-mobile-input" />
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/

Also, I recommend that you play Flexbox Froggy! You can learn more about how to display elements through the game.

https://flexboxfroggy.com/