Flexbox centering items is causing overlapping content
<p>When I try to use flexbox to center items there is some overlapping content and misalignment. </p>

<p><a href="https://i.stack.imgur.com/48PMj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/48PMj.jpg" alt="enter image description here"></a></p>

<p><a href="https://jsfiddle.net/a9oc6gL8/1/" rel="nofollow noreferrer">https://jsfiddle.net/a9oc6gL8/1/</a></p>

<pre><code>.footer_3 {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: center;
  top: 220px;
     padding-bottom:100px;
}

.footer_4 {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: center;
  top: 190px;
}
</code></pre>