I want to have a navigation bar like this picture below but I'm facing a problem with flex items and my paragraph which will be like a description under my logo. Is there any way to make it look exactly the same as what is in the picture?

[![picture](https://i.stack.imgur.com/KjeeM.jpg)](https://i.stack.imgur.com/KjeeM.jpg)

```css
#container {
  overflow: auto;
  padding: 0 20px;
  background: #fff;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#container a {
  color: rgb(0, 0, 0);
}

#container h1 {
    margin-left: 20px;
}

#container ul {
  list-style: none;
  display: flex;
  align-items: center;
  margin-right: 10rem;
}

#container ul li a {
  color: rgb(0, 0, 0);
  /* margin: 0 1px; */
  padding: 47px;
  font-size: 20px;
}

#container ul li a:hover {
  background: #f4f4f4;
}

/* Showcase */
#showcase {
  background: url(../IMG/man.jpg) no-repeat center center/cover;
  height: 87.2vh;
}

#showcase-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 700px;
  left: 0;
  right: 0;
  bottom: 0;
}
```

```html
<nav id="navbar">
    <div id="container">
      <a href="#home"><h1><span class="text-primary">lorem</span> ipsum</h1></a>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#mywork">My Work</a></li>
    </div>
    </ul>
  </nav>
  <header id="showcase">
    <div id="showcase-content">
      <a href="#about" class="btn">Check out</a>
    </div>
  </header>
```