Why wont my create-react-app content center?

Question

I used create-react-app and have been playing around with it. I understand the "app" class is supposed to center the content, and it did when I barely anything. But now it isn't doing that. Can someone tell me where I'm going wrong?

App.js

import React from "react";
import './App.css';
import { Route, BrowserRouter as Router } from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";
function App() {
  return (
    <div className="app">
    <Router>
        <Route path="/" exact component={Home} />
        <Route path="/about" exact component={About} />
    </Router> 
    </div>
  );
}

export default App;

about.js

import React from "react";
import { Button, Breadcrumb, Card } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css'

function About() {
    return (

        <div className="app">
            <h1>ABOUT PAGE</h1> 
            <a href="/">
            <img src="https://www.searchpng.com/wp-content/uploads/2019/02/Back-Arrow-Icon-PNG-715x715.png" height="50px" />
          </a> 
          <Card className="mb-3" style={{ color: "#000"}}>
              <Card.Img/>
              <Card.Body>
              <Card.Title>
                  Card Example
              </Card.Title>  
              <Card.Text>
                  This is an example of react bootstrap cards
              </Card.Text>
              </Card.Body>
          </Card>
          <Breadcrumb>
          <Breadcrumb.Item>Test</Breadcrumb.Item>
          <Breadcrumb.Item>Test 2</Breadcrumb.Item>
          <Breadcrumb.Item>Test 3</Breadcrumb.Item>
          </Breadcrumb>
          <Button variant="success">Test Button</Button>
        </div>

    )
}

export default About;

Answer 1

In create-react-app, there is a file App.css with class .App :

.App {
  text-align: center;
}

If you'd like to use it, you will have to use capitalized name of the class, since that's how it is defined in css file.