React Bootstrap Container, children rendering 2px high

This is my first post on Stack Overflow, so my apologies in advance for any snafus in presentation.

I am new to react bootstrap and am using it to try to build a simple dashboard with 4 cards in the center. I used Create React App with npm and have edited the boilerplate code. When I try to render my app, the Container and its children are only 2px high. I've tried removing the App-header styling, but, that only changes the position of the cards. My App.js file has the App() function written as follows:

import './App.css';
import Card from './Card.js'
import { Container, Row, Col } from 'react-bootstrap'

function App() {
  return (
    <div>
      <div className='App-header'>
        <Container>
          <Row className='row'>
            <Col> <Card /> </Col>
            <Col> <Card /> </Col>
            <Col> <Card /> </Col>
            <Col> <Card /> </Col>
          </Row>
        </Container>
      </div>
    </div>
  );
}

export default App;

My App-header class in my App.css file is as follows:

.App-header {
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: #000000;
  max-width: 100%;
}

My Card.js file uses boiler plate code from react bootstrap for a simple card:

import { Card, Button } from 'react-bootstrap'


<Card style={ {width: '18rem'} }>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>



export default Card

Here is what it looks like when I try to render it:

I'm trying to get the cards to render in the middle of the Container and div as they are shown on the react bootstrap site. Thanks again!