How to do normal style?

Question

css

I decided to make a pretty design for the form and thought it would be cool if it flips and on a normal scale everything turned out and everything is fine, but when I reduce the screen, a disgrace happens. css experts please help. If that markup on jsx

HTML

const passwordRef = useRef(null);
const usageRef = useRef(null);
const [isMoved, setIsMoved] = useState(false);

<div className={`${Styles.form} ${isMoved && Styles.moved}`}>
            <div className={Styles.fst} />
            <div className={`${Styles.firstSlide} ${Styles.slide} ${isMoved && Styles.moved}`}>
                <button
                    className={`${Styles.exit}`}
                    onClick={removeNewPasswordForm}> <i className="fas fa-times"/> </button>
                <input
                    ref={usageRef}
                    autoFocus={true}
                    placeholder={"Usage"} type="text"
                    className={Styles.usageInput}/>
                <button
                    className={`${Styles.arrow} ${Styles.toWritePassword}`}
                    onClick={() => {setIsMoved(true)}}> <i className="fas fa-angle-right"/> </button>
            </div>
            <div className={`${Styles.secondSlide} ${Styles.slide} ${isMoved && Styles.moved}`}>
                <button
                    className={`${Styles.arrow} ${Styles.toWriteUsage}`}
                    onClick={() => setIsMoved(false)}> <i className="fas fa-angle-left"/>  </button>
                <input
                    ref={passwordRef}
                    placeholder={"Password"} type="text"
                    className={Styles.passwordInput}/>
                <button
                    className={`${Styles.arrow} ${Styles.continue}`}
                    onClick={confirmNewPassword}> <i className="fas fa-angle-double-right"/> </button>
            </div>
        </div>

css

.form {
    display: flex;
    justify-content: left;
    overflow: hidden;
    width: 30vw;
    box-sizing: border-box;
    padding: 17.6px 0px;
}

.form input {
    width: calc(30vw * 0.7);
    margin: 0 auto;
    padding: 7px 5px;
}

.slide {
    display: grid;
    grid-template-columns: 2em 1fr 2em;
    min-width: 30vw;
    transition: 0.6s;
}

.moved {
    padding-right: 30vw;
}

.slide.moved{
    margin-left: -30vw;
}

.arrow, .exit {
    padding: 0 5px
}

.arrow {
    font-size: 1.1em;
}

/*media requests for slides*/
@media screen and (max-width: 1200px){
    .form {
        width: 45vw;
    }

    .slide {
        min-width: 45vw;
        max-width: 45vw;
    }

    .slide.moved{
        margin-left: -45vw;
    }
}

@media screen and (max-width: 950px){
    .form {
        width: 55vw;
    }

    .slide {
        min-width: 55vw;
    }

    .slide.moved{
        margin-left: -55vw;
    }
}

@media screen and (max-width: 750px){
    .form {
        width: 65vw;
    }

    .slide {
        min-width: 65vw;
    }

    .slide.moved{
        margin-left: -65vw;
    }
}

@media screen and (max-width: 600px){
    .form {
        width: 100vw;
        padding: 0;
    }

    .slide {
        min-width: 100vw;
        max-width: 100vw;
    }

    .slide.moved{
        margin-left: -0vw;
    }
}

Answer 1

I solved everything by changing the .moved
margin-left: -30vw;
on
transform: translate(-30vw);