I am currently working on a website using react-bootstrap, and I have come across an issue where I need to change the width of a container to 60% while still keeping it centered. Despite adjusting the width, I am having trouble centering the container. Can anyone provide guidance on how I can achieve this?
Below is the code snippet:
import {Row, Col, Container, Button} from "react-bootstrap"
import '../CSS/Room.css'
const Room = () => {
return (
<>
<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>
</>
)
}
export default Room
Below is the CSS code snippet:
.roomfac {
display: flex;
widtH: 60%;
margin: auto;
}