How to display React app in full page always?

Question

I am developing app with React and Material UI and trying to display the app in full-page mode, but can`t do it. Currently, it looks like this:

My App.js code:

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 I`m new to the front-end development, so sorry if this question is stupid. Probably, I missed something while setting background color. Can anyone help me? As I use React router in my app, I add code of particular page, maybe problem is somewhere here.
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;
}

Answer 1

Have you tried

.App {
  margin: 0;
  padding: 0;
  min-height: 100% //or 100vh
}

Answer 2

Add the following top of your style sheet ( App.css ).

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}