如何始终在整页中显示React应用程序？

我正在使用React和Material UI开发应用程序，并尝试以全页模式显示该应用程序，但是无法做到。当前，它看起来像这样：

我的App.js代码：

import 'typeface-roboto';
import './css/App.css'
import React from 'react';
import ArticlePage from "./pages/article";
import ProfilePage from "./pages/profile";
import {MuiThemeProvider} from "material-ui";
import CssBaseline from "@material-ui/core/CssBaseline";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import NavBar from "./components/NavBar";
import HomePage from "./pages/home";
import InboxPage from "./pages/inbox";

function App() {
    return (
        <MuiThemeProvider>
            <div className="App">
                <Router>
                    <CssBaseline/>
                    <NavBar/>
                    <Switch>
                        <Route path="/profile">
                            <ProfilePage profileName={"Denis Ivanenko"} dateTime={"2017-02-14"}
                                         userBio={"Example of User Bio. Here User can write about himself."}/>
                        </Route>
                        <Route path="/article">
                            <ArticlePage
                                imageSrc={"https://insights.dice.com/wp-content/uploads/2017/09/shutterstock_315465929.jpg"}
                                text={"Ever spent three hours trying to find that bit of knowledge that everyone seemed to have but you?\n" +
                                "\n" +
                                "As a self-trained Python developer, I've sometimes found myself stuck in that knowledge crater, between tutorials far simpler than real life, and articles more advanced than I could comprehend. Even the documentation felt like a firehose of information, making it nearly impossible to find the one basic thing I needed to know.\n" +
                                "\n" +
                                "In this series, I'll be exploring a few of these topics, in a way that hopefully makes them dead simple!\n" +
                                "\n" +
                                "Intended Audience\n" +
                                "While programmers at all experience levels may find this series useful, I'm specifically targeting Python novices. I am assuming, however, that you have a very basic understanding of programming. The coding topics especially will be more focused on the Python way of doing things, not on the underlying generic concept.\n" +
                                "\n" +
                                "With that said, if you're an intermediate-level Python developer, you may still find it helpful to follow along with the series. Although I've been working with Python for nearly eight years, some of these topics didn't really \"click\" for me until recent years. These are the explanations I wish I'd had!\n" +
                                "\n" +
                                "What You Won't Find Here\n" +
                                "All of the topics I'm discussing here go much, much deeper. However, I don't want to muddy the waters, so I'll be omitting a considerable amount of detail. Once you're comfortable with a topic, and have done it a few times yourself, I recommend going back and reading through the official Python documentation on the topic.\n" +
                                "\n" +
                                "A Note on Python Versions\n" +
                                "The official end-of-life for Python 2 is rapidly approaching, so you should learn and begin using Python 3 as soon as possible! This entire series is geared towards Python 3, with a bias towards 3.6 and 3.7, except as otherwise noted.\n" +
                                "\n" +
                                "Edits\n" +
                                "The articles in this series are frequently being reviewed by my fellow Python experts, and by the Dev community at large. I will expand and revise accordingly. Always check the edit timestamp at the top of the article.\n" +
                                "\n" +
                                "Roadmap\n" +
                                "The current series plan is below. Please note, I may rearrange, add, or remove planned sections."}
                                authorImageSrc={"https://lh5.googleusercontent.com/--OlyHl449xI/AAAAAAAAAAI/AAAAAAAAAAA/ACevoQNk7ZZElQ_vKIQT_6d4HZw_wN3Qxg/mo/photo.jpg?sz=64"}
                                authorName={"Denis Ivanenko"}
                                dateTime={"2017-02-14"}
                                title={"Introducing \"Dead Simple Python\"\n"}
                                subtitle={"Introduction"}
                            />
                        </Route>
                        <Route path="/inbox">
                            <InboxPage name={"Denis"} surname={"Ivanenko"}
                                       messages={[{
                                           author: "Bill Gates",
                                           text: "Hi, how are you?"
                                       }, {author: "Bill Gates", text: "Hi, how are you?"}, {
                                           author: "Bill Gates",
                                           text: "Hi, how are you?"
                                       }, {author: "Bill Gates", text: "Hi, how are you?"}]}/>
                        </Route>
                        <Route path="/">
                            <HomePage/>
                        </Route>
                    </Switch>
                </Router>
            </div>


        </MuiThemeProvider>
    );
}

export default App;

App.css：

.App {
    background: #485563;
    background: -webkit-linear-gradient(to right, #29323c, #485563);
    background: linear-gradient(to right, #29323c, #485563);
    height: 100%;
    margin: 0;
    padding: 0;
}

PS我是前端开发的新手，如果这个问题很愚蠢，请您谅解。可能是我在设置背景色时错过了一些东西。谁能帮我？当我在应用程序中使用React Router时，我添加了特定页面的代码，也许问题出在这里。
Inbox.js：

import React from "react";
import Paper from "@material-ui/core/Paper";
import Container from "@material-ui/core/Container";
import '../css/Inbox.css';
import {Divider} from "@material-ui/core";
import AvatarImage from "../components/AvatarImage";


export default class InboxPage extends React.Component {
    render() {
        const name = this.props.name;
        const surname = this.props.surname;
        const messages = this.props.messages;
        return (
            <Container>
                <Paper>
                    <h1 className={"inboxHeader"}>{name}{" " + surname + "`s"} Inbox:</h1>
                    <Divider/>
                    {messages.map((message) =>
                        <Container>
                            <AvatarImage className={"AvatarImage"}/>
                            <h2>{message.author}:</h2>
                            <p>{message.text}</p>
                            <Divider/>
                        </Container>
                    )}
                </Paper>
            </Container>
        );
    }
}

Inbox.css ：

.inboxHeader {
    text-align: center;
}

h2, p, img {
    display: inline-block;
}
.AvatarImage{
    display: inline-block;
}
.flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}