How to fix when the NavBar is pressed not to move the content ReactJS?

Question

The content shifts when I press NavBar to stretch.

How can I fix the content to always stay where I positioned it ?

This is screenshot when NavBar is not pressed and everything is fine:

This is screenshot when NavBar is pressed and content is moved:

This is my code on React:

    function Home() {
  return <div className="firstPageDiv">
    <div className="contentFirstPage">
      <h7>"Финиш Груп" ЕООД е специализирана в организирането и извършването на цялостни или частични ремонти на вашият Дом, Офис или Магазин.</h7>
    </div>
  </div>;
}

This my css from these two divs:

  .firstPageDiv{
  background-image: url("./Images/background.jpg");
  background-size: 100% 100%;
  height: 400px;
  }

.contentFirstPage{
  position: absolute;
  top: 80%;
  left: 25%;
  right: 25%;
  transform: translate(0, -50%);
  padding: 10px;
  background-size: 100% 100%;
  background: rgba(255,255,255,0.5);
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bold;
  font-size: xx-small;
}

This is my NavBar:

   function App() {
  return (
    <Router>
      <div className="App">

        <Navbar collapseOnSelect expand="md" bg="dark" variant="dark">
          <Navbar.Brand href="/">"ФИНИШ ГРУП" ЕООД</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto">
            <Nav> 
                    <Link to={'/'} className="nav-link">НАЧАЛО</Link>
                    </Nav>
                    <Nav> 
                      <Link to={'/services'} className="nav-link">УСЛУГИ</Link>
                    </Nav>
                    <Nav> 
                      <Link to={'/gallery'} className="nav-link">ГАЛЕРИЯ</Link>
                    </Nav>
                    <Nav> 
                      <Link to={'/contacts'} className="nav-link">КОНТАКТИ</Link>
                    </Nav>
                    <Nav> 
                      <Link to={'/about'} className="nav-link">ЗА НАС</Link>
                    </Nav>
            </Nav>
          </Navbar.Collapse>
        </Navbar>

        <Switch>
              <Route exact path="/">
                <Home />
              </Route>
                <Route exact path="/services" component={Services}>
              <Services />
              </Route>
                <Route exact path="/gallery" component={Gallery}>
              <Gallery />
              </Route>
                <Route exact path="/contacts" component={Contacts}>
              <Contacts />
              </Route>
                <Route exact path="/about" component={About}>
              <About />
              </Route>
            </Switch>

        <header className="App-header">
        </header>
      </div>
    </Router>
  );
}

What do I need to fix to keep the contents of the same position before and after clicking NavBar ?

Answer 1

Well there are some mistakes:

function Home() {
  return (
  <div className="firstPageDiv">
    <div className="contentFirstPage">
      <h6>"Финиш Груп" ЕООД е специализирана в организирането и извършването на цялостни или частични ремонти на вашият Дом, Офис или Магазин.</h6>
    </div>
  </div>
);
}

There's no h7 tag in html and I put the divs in parentheses.

Also in css try to..:

.firstPageDiv{
  background-image: url("./Images/background.jpg");
  background-size: 100% 100%;
  height: 400px;

/*to position your content*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentFirstPage{
  padding: 10px;
  background-size: 100% 100%;
  background: rgba(255,255,255,0.5);
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bold;
  font-size: xx-small;
}

I guess flex is better for positioning but let me know the result.