Как разместить элемент абзаца под страницей lo go, которая отображается как flex?

Question

Мне нужна навигационная панель, подобная приведенной ниже, но я столкнулся с проблемой с элементами Flex и моим абзацем, который будет похож на описание под моим lo go. Есть ли способ заставить его выглядеть точно так же, как на картинке?

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

<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>

Answer 1

В вашем flexbox-заголовке есть два подэлемента. Используйте другой flexbox для навигации.

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  background: #111 url('https://i.picsum.photos/id/66/1600/1000.jpg') no-repeat center center scroll;
  background-size: cover;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}



header {
  background-color: #fff;
}

.navbar-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#branding {
  flex: 2;
}

#branding h1 a {
  font-size:  1.5rem;
  color: #000;
  text-decoration: none;
  font-weight: 700;
  display: block;
  margin-bottom: 1rem;
}

#navbar-main {
  flex: 3;
  margin-top: 2rem;
}

#navbar-main a {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}

.section-heading {
  color: #fff;
  font-size: 2rem;
}

@media screen and (min-width: 480px) {
  .container--flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
  }
  #navbar-main {
    margin: 0 0 0 2rem;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>

<header>
  <div class="container container--flex">
    <div id="branding">
      <h1><a href="#home">Lorem ip</a></h1>
      <p>Fascilis mauris sit amet masse </p>
    </div>
    <nav id="navbar-main" class="navbar-horizontal">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
        <a href="#mywork">My Work</a>
    </nav>
  </div>
</header>

<main>
  <div class="container">
    <section id="showcase">
      <h2 class="section-heading">Showcase</h2>
    </section>
  </div>
</main>

Answer 2

Вам понадобится вложенный столбец:

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

.flex-col {
    display: flex;
    flex-direction: column;
}

<nav id="navbar">
    <div id="container">
        <div class="flex-col">
            <a href="#home">
                <h1>Heading</h1>
            </a>
            <p>Lorem ipsum dolor.</p>
        </div>
        
        <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>
        </ul>
    </div>
</nav>