Div does not expand fully horizontally

Question

Why is there a space left and right of my div?

render() {
    return (
        <div className="container intro-body">
            <div className="row">
                <h2 className="intro-name center-block">TEXT</h2>
            </div>
        </div>
    )
}

And in mine css:

.intro-body {
    height: 500px;
    background-color: #3BC5C3;
}

I tried installing bodyin margin: 0and padding: 0, considering that this was due to the default values ​​for Bootstrap, but that did not work. I also don't have a container, so why does it still have a gasket?

Answer 1

The problem is with the container class. Bootstrap also applies the styling of this - use a "container-liquid" to get the full width.

render() {
    return (
        <div className="container-fluid intro-body">
            <div className="row ">
                <h2 className="intro-name center-block">TEXT</h2>
            </div>
        </div>
    )
}