Hey everyone, I'm currently working on developing a web application using react-bootstrap and I've encountered an issue with adjusting the width of my row and centering it. I have already created the necessary CSS and JS files, but I am unable to successfully center the row. Interestingly, when I transferred my code to codesandbox, everything worked perfectly fine. Does anyone have any insights into why this might be happening?
Here is my code snippet:
<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>
This is how I have styled my elements in CSS:
.roomfac {
display: flex;
width: 60%;
justify-content: center;
margin: auto;
}