Why the page is overflowing both in x and y axis and also not centering vertically?

Question

So I am to align the <H4> styled component to the center of the page using flex-box but is not working, I also tried margin:0 auto but it only aligned the H4 horizontally

Also i am trying to find why the page is overflowing?

import React from "react";
import {
  IconButton,
  Drawer as MUIDrawer,
  ListItem,
  ListItemI
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import styled from "styled-components";

const H4 = styled.h4`
  font-size: 30px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  color: lightblue;
  letter-spacing:2px
`;

export default function home() {
  return (
    <div style={{ display: "flex", width: "100vw", height: "100vh",margin:"0",padding:"0" }}>
      <IconButton style={{ position: "absolute", right: "0" }}>
        <MenuIcon />
      </IconButton>
      <H4
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        This is Home Page
      </H4>
    </div>
  );
}

Answer 1

justifyContent and alignItems are for aligning children items, not the item itself. Try alignSelf: "center".