Need CSS Grid help for React Drum Machine

Hi,
I’m trying to place a title on row 1, spanning column 1 and 2. Text should be centered.
And a container with controls on row 2, column 1, and another container on row 2, column 2.

Instead, it seems my grid values are ignored. Text not centered either. What am I doing wrong?

Here’s the CSS:

.title_text {
  text-align: center;
  justify-content: center;
}

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  width: 100%;
  height: 100%;
}

.title_container {
  grid-row: 1;
  grid-column: 1 / 3;
}

.pad_container {
  grid-row: 2;
  grid-column: 1 / 2;
}

.controls_container {
  grid-row: 2;
  grid-column: 2 / 3;
}

.display {
      width: 200px;
      background-color: gray;
      margin: 15px;
      padding: 15px;
      box-sizing: border-box;
    }

And here’s the render function of my React component. I’m missing plenty of buttons and controls for the Drum Machine, but that’s not the point of this question.

  render () {
    return (<div>
        <div id="container">
          <div id="title_container">
            <h1 id="title_text">Drum Machine</h1>
          </div>
          <div id="pad_container">
            <p className="display"> Test</p>
          </div>
          <div id="controls_container">
            <div>
              <label id="power_label">Power </label>
              <button id="power" onClick={this.handlePowerClick}>
                {this.state.power ? 'ON' : 'OFF'}
              </button>
            </div>
            <div>
              <Display display={this.state.bank}/>
            </div>
            <div>
              <label id="bank_label">Bank </label>
              <button id="bank" onClick={this.handleBankClick}>
                {this.state.bank == 0 ? '1' : '2'}
              </button>
            </div>

          </div>
        </div>
      </div>
    );
  } // end render

Never Mind. I forgot to see the classNames for my containers.