I am currently in the process of developing an airline reservation system using the MERN stack. I have successfully implemented the navbar, however, whenever I try to add a new div or element, it appears outside of the page and requires additional styling to position it correctly. https://i.sstatic.net/1PGtj.jpg
My goal is to have the buttons centered on the page without having to manually apply styles.
UPDATE 1: Below is the code for 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>
);
}
}