title: How to denote two UL lists as two different items in parent container for HTML?
body: <p>I feel like I'm missing something conceptually between parent/child(items) in FlexBox.</p>
  <p>I'm looking to create a NavBar that looks like this:</p>
  <p><strong>Desired output:</strong></p>
  <pre class="lang-none prettyprint-override"><code>Logo      Home Store(class &quot;leftbar&quot;)      About Search Contact Button(class &quot;rightbar&quot;)
  </code></pre>
  <pre class="lang-html prettyprint-override"><code> &lt;header&gt;
      &lt;img src=&quot;/bootstrap-clone/Images/bootstrap-logo-3C30FB2A16-seeklogo.com.png&quot; alt=&quot;bootstraplogo&quot; class=&quot;boostraplogo&quot;&gt;
      &lt;nav&gt;
        &lt;ul class=&quot;leftbar&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;Home&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;Documentation&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;Examples&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;Icons&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;Themes&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;Expo&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;Blog&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;ul class=&quot;rightbar&quot;&gt;
          &lt;li&gt;v4.5&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;/bootstrap-clone/Images/github.svg&quot; alt=&quot;github&quot;&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;/bootstrap-clone/Images/twitter.svg&quot; alt=&quot;twitter&quot;&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;/bootstrap-clone/Images/slack.svg&quot; alt=&quot;slack&quot;&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;/bootstrap-clone/Images/google.svg&quot; alt=&quot;google&quot;&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;button&gt;Download&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        
      &lt;/nav&gt;
  
  
    &lt;/header&gt;
  </code></pre>
  <p>My attempted solution:</p>
  <pre class="lang-css prettyprint-override"><code>header {
      border: 1px solid #2d2d2d;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    };
  </code></pre>
  <p>Issue is that this is the output from the CSS code above aggregates the UL list together when I use  <strong>justify-content: space-evenly;</strong> so it becomes</p>
  <p>Logo ............ Home Store About Search Contact Button</p>