Is there a way to make this div visible?-CodePudding

Now I have some navbar on a page. I've added everything but one of the links disappears. I just can't see it. On inspecting, you can see it on the console but it is not there in the foreground.

here is the code

import React from "react";
import { GiHambugerMenu } from "react-icons/gi";
import { MdOutlineRestaurantMenu } from "react-icons/md";
import images from "../../constants/images";

import "./Navbar.css";

const Navbar = () => (
  <nav className="app__navbar">
   <div className="app__navbar-logo">
     <img src={images.gericht} alt="App  Logo" />
   </div>
  <ul className="app__navbar-links">
    <li className="p__opensans">
      <a href="#home">Home</a>
    </li>
    <li className="p__opensans">
    <a href="#about">About</a>
  </li>
  <li className="p__opensans">
    <a href="#menu">Menu</a>
  </li>
  <li className="p__opensans">
    <a href="#Awards">Awards</a>
  </li>
  <li className="p__opensans">
    <a href="#Contact">Contact</a>
  </li>
</ul>
<div className="app__navbar-login">
  <a href="#login" className="p__opensans">
    Log in / Register
  </a>
  <div />
  <a href="/" className="p_opensans">
    Book Table
  </a>
</div>
</nav>
);

export default Navbar;

and the CSS

.app__navbar-login a:hover {
   border-bottom: 1px solid var (--color-golden);
  }
.app__navbar-login div {
   width: 1px;
   height: 30px;
   background-color: var(--color-grey);
}

The bar shows all the links except the last one tagged Book Table

Please helpThis is the screenshot of the navbar

CodePudding user response：

You have an extra closing div

import React from "react";
import { GiHambugerMenu } from "react-icons/gi";
import { MdOutlineRestaurantMenu } from "react-icons/md";
import images from "../../constants/images";

import "./Navbar.css";

const Navbar = () => (
  <nav className="app__navbar">
   <div className="app__navbar-logo">
     <img src={images.gericht} alt="App  Logo" />
   </div>
  <ul className="app__navbar-links">
    <li className="p__opensans">
      <a href="#home">Home</a>
    </li>
    <li className="p__opensans">
    <a href="#about">About</a>
  </li>
  <li className="p__opensans">
    <a href="#menu">Menu</a>
  </li>
  <li className="p__opensans">
    <a href="#Awards">Awards</a>
  </li>
  <li className="p__opensans">
    <a href="#Contact">Contact</a>
  </li>
</ul>
<div className="app__navbar-login">
  <a href="#login" className="p__opensans">
    Log in / Register
  </a>
  <div /> <------------------------------------------------- HERE
  <a href="/" className="p_opensans">
    Book Table
  </a>
</div>
</nav>
);

export default Navbar;