Nested rows in Bootstrap aren't the correct width

Question

I read the following: How can I get a Bootstrap column to span multiple rows? and couldn't quite replicate what was shown.

Here's what I ended up with: https://codepen.io/saka-rauka1/pen/MWodjao?editors=0010

render() {
    return (
        <div className="container-fluid">
            <div className="row">
                <button id="1" className="col-4">1</button>
                <div className="col-8">
                    <div className="row">
                        <button id="2" className="col-4">2</button>
                        <button id="3" className="col-4">3</button>
                    </div>
                    <div className="row">
                        <button id="4" className="col-4">4</button>
                        <button id="5" className="col-4">5</button>
                    </div>
                </div>
            </div>
            <div className="row">
                <button id="a" className="col-4">a</button>
                <button id="b" className="col-4">b</button>
                <button id="c" className="col-4">c</button>
            </div>
            <div className="row">
                <div className="col-8">
                    <div className="row">
                        <button id="6" className="col-4">6</button>
                        <button id="7" className="col-4">7</button>
                    </div>
                    <div className="row">
                        <button id="8" className="col-4">8</button>
                        <button id="9" className="col-4">9</button>
                    </div>
                </div>
                <button id="0" className="col-4">0</button>
            </div>
        </div>
    );
}

For whatever reason, the divs containing the nested rows don't come out to the same width as the non-nested buttons. The 1 and 0 buttons are the correct width, seen by comparing them to either the "a" "b" or "c" buttons, but the 2-5 and 6-9 blocks are too narrow.

Can anyone point out what I'm missing?

Answer 1

So I was told that the reason this is happening is that bootstrap gives a relative dimension and the rows in question are nested inside a div. Changing col-4 into col fixed it.