CSS Code don't work on react.js centering width-CodePudding

Hi guys so I'm trying to create an web application using react-bootstrap and I wanted to change the width of my row and center it. I already make the css and js file but I cannot center the row. I tried moving my code to codesandbox and it work just fine. anyone know why ?

My code:

            <Container fluid>
                <Row className="roomfac fontReg">
                    <Col lg={3} className="text-center">
                       <img src="./Images/logofridge.png" alt="Logo 1"/>
                       <h3 className="fontSB">Fridge</h3>
                    </Col>

                    <Col lg={3} className="text-center">
                       <img src="./Images/logoAC.png" alt="Logo 2"/>
                       <h3 className="fontSB">AC</h3>
                    </Col>

                    <Col lg={3} className="text-center">
                       <img src="./Images/logowifi2.png" alt="Logo 3"/>
                       <h3 className="fontSB">Wifi</h3>
                    </Col>

                    <Col lg={3} className="text-center">
                       <img src="./Images/logotv.png" alt="Logo 4"/>
                       <h3 className="fontSB">TV</h3>
                    </Col>
                </Row>
            </Container>

My CSS Code:

.roomfac {
    display: flex;
    width: 60%;
    justify-content: center;
    margin: auto;
}

CodePudding user response：

It is working for me too in chrome as well as edge, make sure whether your css files are included correctly or else try using inline css in jsx.

<Row style={{display:"flex",width: "60%",margin: "auto",justifyContent: "center"}} className="fontReg">