为什么我的页面的响应能力无法正常工作？

Question

因此，当宽度下降到1000px以下时，我将其设置为90％的React制作，但宽度似乎并没有以百分比下降。它看起来不错，直到700px，但不会改变其尺寸。

此处的内容：

const Form = () => {
    return (
        <div className='div-container'>
            <div className="form-container">
                <div className='div-child toggle-button'>
                    <input type='checkbox' id='toggle' className='toggleCheckbox' value='report' />
                    <label htmlFor='toggle' className='toggleContainer'>
                        <div>Report Bug</div>
                        <div>General Form</div>
                    </label>
                </div>

                <div className='div-child formular'>
                    <form>
                        <label htmlFor="fname">Name</label>
                        <input name='Name' className='name' type="text" id="fname" required='true' >

                        </input>
                        <label htmlFor="fmail">Email*</label>
                        <input name='Mail' className='mail' type="email" id="fmail" required='true' >

                        </input>
                        <label>Game*</label>
                        <select name='Game' className='game'>
                            <option value='game1'>Game1</option>
                            <option value='game2'>Game2</option>
                            <option value='game3'>Game3</option>
                        </select>
                        <label>Category*</label>
                        <select name='Categ' className='category'>
                            <option value='categ1'>Categ1</option>
                            <option value='categ2'>Categ2</option>
                            <option value='categ3'>Categ3</option>
                        </select>
                        <label>Description</label>
                        <textarea name='Msg' className='description' cols='5' rows='5' placeholder='Write your message here...'>

                        </textarea>
                        <button type='submit'>Submit</button>
                    </form>
                </div>

            </div>
            <div className='div-child media'>
                <strong>Connect with us on Social Media</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                <p>Connect on Facebook</p>
                <p>Connect on Twitter</p>
                <p>Connect on Steam</p>
            </div>
        </div>

    )
}

这里是CSS：

    margin-top: 5%;
}

.toggle-button{
    background-color: aqua;
}

.formular{
    background-color: aquamarine;
}

.media{
    background-color: blue;
}

.div-child{
    margin-right: 2%;
    width: 100%;
    background-color: white;
}


input, select, textarea{
    padding: 1%;
    box-sizing: border-box;
    margin-bottom: 2%;
    width: 100%;
    background-color: white;
    border: 1px;
    border-style:solid;
}

button{
    background-color: #111111;
    color: white;
    width: 50%;
    display: flex;
    justify-content: center;
    border: solid #111111;
    margin-left: 25%;
    padding: 2%;
}


@media only screen and (max-width: 1000px){
    .img_game{
        display: none;
    }
}

/*grid*/
.div-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "toggle-button" "formular media";
    column-gap: 100px;
    row-gap: 100px;
}
.form-container{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-content: center;
}
.div-child{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-content: center;
}
@media only screen and (min-width: 400px) and (max-width: 1000px) {
    .div-container {
        width: 90%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        column-gap: 100px;
        row-gap: 100px;
    }
    .form-container{
        width: 90%;
        margin: 0 auto;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        justify-content: center;
    }

    label, input, select, textarea, button, p, strong{
        font-size: 200%;
        min-height: 6rem;
        resize: vertical;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 5rem;
        
    }
    .div-child{
        width: 90%;
        margin: 0 auto;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
        justify-content: center;
    }
}



/*end grid*/

以下是全屏上的一些预览，宽度800和400：

Answer 1

尝试更改：

@media only screen and 

到：

@media all screen and