Reactjs why my Form not changes when windows resize

I am putting a Form under my HeroSection (top of homepage layout). When i resize my windows the Form is fixed on its place, whereas other components will rearrange according to the windows size. Attached below is my code:

                 <div className='QuoteForm'>
                    <Form className='Form1'>
                    
                        <Form.Row>
                            <Form.Group as={Col} controlId="formGridState">
                                <Form.Label>{t("From")}</Form.Label>
                                <Form.Control as="select" >
                                    
                                    <option>place1</option>
                                    <option>place2</option>
                                </Form.Control>
                            </Form.Group>
    
                            <Form.Group as={Col} controlId="formGridState">
                                <Form.Label>{t("To")}</Form.Label>
                                <Form.Control as="select" >
                                    
                                    <option>place1</option>
                                    <option>place2</option>
                                </Form.Control>
                            </Form.Group>
                        </Form.Row>
                        <Form.Row>
                            <Form.Group as={Col} controlId="formGridState">
                                    <Form.Label>{t("WeightUnit")}</Form.Label>
                                    <Form.Control as="select" >
                                        <option>kg</option>
                                        <option>g</option>
                                    </Form.Control>
                                </Form.Group>
    
                            <Form.Group as={Col} controlId="formGridBox">
                            <Form.Label>{t("ItemWeight")}</Form.Label>
                            <Form.Control  placeholder="5 KG" />
                            </Form.Group>
                        </Form.Row>  
                        <Form.Row>
                        <Form.Group as={Col} controlId="formGridLabel">
                            <label>RM 99</label>
                        </Form.Group>
                        <Form.Group as={Col} controlId="formGridButton">
                        <Button variant="primary" type="submit">
                        {t("QuoteNow")}
                        </Button>
                        </Form.Group>
                            
                        </Form.Row>
                        
                    </Form>
                    </div>

CSS

.QuoteForm{
    padding-left: 10rem;
    padding-top: 10rem; 
    width: 50rem; 
    font-size: 1.5rem;  
} 
.Form1{
    color: #fff;    
    background-color: rgb(212, 3, 3, .6);   
}

Where am I going wrong?