I am creating a airline reservation system using mern stack
I did the navbar and all is well but everytime I add a div or an element in general it's outside the page and I have to style it to be at the position I want it

I want the buttons to be in the middle of the page without forcing it using style
EDIT 1: here is my navbar element
import React from "react";
import { Component } from 'react';
import './style.css';
import background from "./background.jpg";
import SideBar from "./sidebar";
export default class Navbar extends Component {
showSettings (event) {
event.preventDefault();
}
render () {
// NOTE: You also need to provide styles, see https://github.com/negomi/react-burger-menu#styling
return (
<div id="App" style = {{ backgroundImage: `url(${background})`, backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
position:"relative",
width: '100vw',
height: '100vh' }}>
<SideBar pageWrapId={"page-wrap"} outerContainerId={"App"} />
</div>
);
}
}