horizontal centering with React Bootstrap

Question

Checked the docs and my code still won't center horizontally.

import React from 'react';
import '../css/Header.css';
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';

const Header = () => {
    return (
        <header className='d-flex justify-content-center header' style={{ backgroundImage: `url("/images/header.png")` }}>
          <Container fluid>
          <Row>
            <Col>
            <div className={'website-title'}>
                My Website
                <div className={'bracket bracket-1'}></div>
                <div className={'bracket bracket-2'}></div>
                <div className={'bracket bracket-3'}></div>
                <div className={'bracket bracket-4'}></div>
            </div>
            </Col>
          </Row>
        </Container>
        </header>
    )
}

export default Header;

I'm using the "d-flex justify-content-center" class like the docs suggest. Any ideas what i'm doing wrong here?

Answer 1

You can try to place the <header> inside the <Container>