<nav className={navbar.navigation}>
      <Link href="/section" className={`${navbar.nav_a} ${navbar.active}`} >Home</Link>
      <Link href="#" className={navbar.nav_a} >About</Link>
      <Link href="predict.html" className={navbar.nav_a} >contact</Link>
      <Link href="#" className={navbar.nav_a} >setting</Link>
      {/* <a href="#">Contact</a> */}
    </nav>
/* I think my problems is from here to */

    <input type="checkbox" id='check' className={navbar.check} />
    <label htmlFor="check" className={`${navbar.check} ${navbar.label}`}>
      <i className={`fas fa-bars ${navbar.menu_btn}`} />
      <i className={`fas fa-times ${navbar.close_btn}`} />
    </label>

/* here */

@media (max-width:1075px){
    .navigation{
        /* display: none; */
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      width: 100%;
      height: 100vh;
      background: #2c3e50;
      top: 0px;
      left: -100%;
      text-align: center;
      transition: all .5s;
    }
    
    .label{
        display: block;
        font-size: 25px;
        cursor: pointer;
        transition: 0.3s;
        transition-property: color;
    }
    .close_btn{
        display: none;
    }
    .check:checked ~ .navigation{
        z-index: 2;
        position: fixed;
        background: rgba(114,223,255,0.9);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .check:checked ~ .menu_btn{
        display: none;
    }
    .check:checked ~ .close_btn{
        z-index: 2;
        display: flex;
        flex-direction: column;
        position: fixed;
    }
}