How can I center a flexbox element and make it grow to fill unequal remaining space?

Question

Take a look at this Codepen: https://codepen.io/devinhalladay/pen/eyKBpY

(The image above is a screenshot of the Codepen. The center line indicates where the center of the page is)

I need to make it so that the H3 is centered within the page despite unequal widths of the other elements, and the lines on the left and right must fill all the available space on either side.

HTML:

<div class="container">
  <a href="#">Title</a>
  <h3>Subtitle</h3>
  <nav>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </nav>
</div>

CSS:

.container {
  max-width: 1200px;
  margin: auto;
  height: 4em;

  display: flex;
  align-items: center;
}

h3 {
  display: flex;
  flex: 1;
}

h3:before,
h3:after {
  background-color: #ddd;
  content: '\a0';
  flex-grow: 1;
  height: 1px;
  position: relative;
  top: 0.5em;
}

// Non-essential styles
ul {
  list-style-type: none;
  padding: 0;
  li {
    display: inline-block;
  }
}