elements in react are always at the bottom of the page

Viewed 50

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 enter image description here

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>
    );
  }
}

1 Answers

try to change position from relative to absolute

Related