How to get horizontal multi-line navigation menu items to left align?

I am trying to use flexbox in a horizontal navigation menu to get the menu items evenly spaced with a pipe separator.

I can get the items to wrap to a next line but the first item on the top line is indented so the first item on the next line starts out further left at the margin.

How do I get the menu to start out on the left margin?

I have two menus and in the first one, the pipes are not evenly spaced. In the second menu, the pipes look evenly spaced. This is what I'm getting.

Example of two navigation menus that wrap unevenly:

How do I get the wrap to align below the first item in the top row with evenly-spaced pipes? Thanks.

This what I've tried.

ul.container {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

ul.container li {
  list-style: none;
  list-style-position: inside;
  display: inline;
  text-align: left;
  margin: 0 0 0 -1em;
  padding: 0.7em 0 0 0;
  white-space: normal;
}

ul.container li.vertical-divider:before {
  font-weight: normal;
  content: " | ";
  padding-right: 0.2em;
  background-color: transparent;
}

<div id="inthissection">
  <p class="inthissection">In This Section:</p>
  <ul class="container">
    <li class="vertical-divider"><a href="http://events.stcwdc.org/about-wdcb-events/">About WDCB Events</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/events">Events Calendar</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/speakers-handouts-and-presentations/">Speakers&#39; Handouts and Presentations</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/first-timers-coupon/">First Timer&#39;s Coupon</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-event-form/">Submit an Event</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-an-article/">Submit an Article</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-event-form/">Event Announcement Form</a></li>
    <li class="vertical-divider"><a href="http://www.stcwdc.org/events_past_archives.shtml">Archives of Past Events</a></li>
  </ul>
</div>

Update: Using the suggestion from @Abinthaha, I came up with a close solution; however, it still doesn't left-align vertically as it is in the codepen example. I'd still like to get a fix for that. Here is what is working for me now:

/* ----Flexible Horizontal NAVIGATION LISTS  */ 
ul.container {
  list-style: none;
  padding: 0;
  max-width: 400px;
  display: flex;
    flex-flow: row wrap;
}

ul.container li.vertical-divider:first-child:before {
    content: none;
    margin: 0 0 0 -0.7em; 
    padding: 0;
    flex-grow: 1
}

li.vertical-divider:not(:last-child) {
    font-weight: normal;
    content: " | ";
    margin: auto;
}

ul.container li.vertical-divider:last-child {
  flex: 0;
}

/* In this section --------------------------------- */
#inthissection {
    background-color: transparent;
    margin: -1em 0 0 0;
    padding: 0 0 0.9em 0;
    font-weight: bold;
    width: auto;
}

p.inthissection {
    margin: 0.9em 0 0 0;
    padding: 0.9em 0 0 0;
    font-size: 0.9em;
    font-weight: bold;
}

#inthissection ul {
    display: inline;
    list-style-type: none;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
}

#inthissection li {
    display: inline;
    margin: -0.4em auto -1.2em -0.5em; 
    padding: 0.7em 0.8em 0.4em 0.8em;
}

#inthissection ul li:first-child:before {
    content: none; 
    margin-left: -28px;
    padding: 0;
}

#inthissection li:before {
    font-weight: normal;
    content: " | ";
    background-color: transparent;
    margin: 0 0 0 -0.7em; 
    padding: 0.7em 0.8em 0.4em 0.8em;
}



<div id="inthissection">
  <p class="inthissection">In This Section:</p>
  <ul class="container">
    <li class="vertical-divider"><a href="http://events.stcwdc.org/about-wdcb-events/">About WDCB Events</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/events">Events Calendar</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/speakers-handouts-and-presentations/">Speakers&#39; Handouts and Presentations</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/first-timers-coupon/">First Timer&#39;s Coupon</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-event-form/">Submit an Event</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-an-article/">Submit an Article</a></li>
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-event-form/">Event Announcement Form</a></li>
    <li class="vertical-divider"><a href="http://www.stcwdc.org/events_past_archives.shtml">Archives of Past Events</a></li>
  </ul>
</div>

Flexbox is a simple technique. I think this is what you are looking for. codepen. Check it. The elements are left aligned and there is no white space in any of the lines on left. And If you want to align the items evenly. Then you can use flex-grow: 1 to the li. So that the li in each line will take the entire space of the line and will divide equally between.

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  padding: 2px 15px;
}

li:not(:last-child) {
  border-right: 1px solid #000;
}